@jx3box/jx3box-common-ui 9.2.1 → 9.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-common-ui",
-    "version": "9.2.1",
+    "version": "9.2.3",
     "description": "JX3BOX UI",
     "main": "index.js",
     "scripts": {
@@ -34,7 +34,7 @@
         "@jx3box/jx3box-comment-ui": "^2.0.3",
         "@jx3box/jx3box-common": "^8.6.3",
         "@jx3box/jx3box-data": "^3.7.7",
-        "@jx3box/jx3box-editor": "^2.2.24",
+        "@jx3box/jx3box-editor": "^2.2.25",
         "@jx3box/reporter": "^0.0.4",
         "axios": "^0.26.1",
         "dayjs": "^1.11.0",
@@ -43,6 +43,7 @@
         "lodash": "^4.17.15",
         "qrcode.vue": "^1.7.0",
         "url": "^0.11.0",
+        "v-code-diff": "^1.13.1",
         "vue": "^2.6.11"
     },
     "devDependencies": {

package/service/commit-history.js

@@ -0,0 +1,19 @@
+import { $next } from "@jx3box/jx3box-common/js/https";
+
+// 获取提交记录
+export function getCommitHistories(id, params) {
+    return $next({ proxy: true }).get(`/api/next2/userdata/commit-history/content-meta/${id}/commit/history`, {
+        params,
+    });
+}
+
+// 通过hash获取提交记录
+export function getCommitByHash(id, hash) {
+    return $next({ proxy: true }).get(`/api/next2/userdata/commit-history/content-meta/${id}/commit/by-hash/${hash}`);
+}
+
+// 提交
+export function commitHistory(id, data) {
+    // { domain: "https://dev.next2.jx3box.com" }
+    return $next({ proxy: true }).post(`/api/next2/userdata/commit-history/content-meta/${id}/commit`, data);
+}

package/src/App.vue

@@ -14,7 +14,7 @@
             <img slot="logo" svg-inline src="../assets/img/jx3.svg" />
             bread info
             <template #op-prepend>
-                <AdminDrop :post="community" :isCommunity="true" :user-id="8" :showMove="true"/>
+                <AdminDrop :post="community" :isCommunity="true" :user-id="8" :showMove="true" />
             </template>
         </Breadcrumb>
 
@@ -23,16 +23,15 @@
             <Author :author="author" :uid="8" />
         </LeftSidebar>
 
-        <Main :withoutLeft="false" :withoutRight="false" style="padding:20px;">
+        <Main :withoutLeft="false" :withoutRight="false" style="padding: 20px">
             <el-tabs v-model="tab" type="card">
-
                 <el-tab-pane label="通用组件" name="widget">
                     <!-- <PostHeader :post="post" /> -->
                     <!-- <Creators :postId="30432" style="margin-bottom: 10px" /> -->
                     <!-- <Collection :id="59" :defaultVisible="true" /> -->
                     <UserPop title="添加用户" v-model="visible" @confirm="addUser" />
                     <el-button @click="visible = true">用户POP</el-button>
-                    <el-button @click="homeworkVisible=true">作业组件</el-button>
+                    <el-button @click="homeworkVisible = true">作业组件</el-button>
                     <!-- :postId="23865" -->
                     <!-- <Thx
                         postType="bps"
@@ -52,7 +51,13 @@
                     <QRcode />
                     <Sharing />
 
-                    <homework v-model="homeworkVisible" post-type="comment" :post-id="19382" :userId="8719" client="std"></homework>
+                    <homework
+                        v-model="homeworkVisible"
+                        post-type="comment"
+                        :post-id="19382"
+                        :userId="8719"
+                        client="std"
+                    ></homework>
 
                     <PostGuide :post="post" />
 
@@ -115,7 +120,7 @@
                 </el-tab-pane>
 
                 <el-tab-pane label="头像" name="avatar">
-                    <el-radio-group v-model="avatar_size" style="margin-bottom:10px;">
+                    <el-radio-group v-model="avatar_size" style="margin-bottom: 10px">
                         <el-radio label="xxs">xxs-36/48</el-radio>
                         <el-radio label="xs">xs-48/68</el-radio>
                         <el-radio label="s">s-68/88</el-radio>
@@ -134,10 +139,11 @@
                 </el-tab-pane>
             </el-tabs>
 
-            <RightSidebar :showToggle="false" style="padding:15px;">
+            <RightSidebar :showToggle="false" style="padding: 15px">
                 <RightSideMsg>Hello</RightSideMsg>
                 <PostTopic></PostTopic>
                 <div id="directory"></div>
+                <PostVersion :post="post"></PostVersion>
                 <PostCollection :id="59" />
             </RightSidebar>
 
@@ -162,6 +168,7 @@ import Main from "./Main.vue";
 import RightSidebar from "./RightSidebar.vue";
 import RightSideMsg from "./RightSideMsg.vue";
 import PostTopic from "./single/PostTopic.vue";
+import PostVersion from "./single/PostVersion.vue";
 
 import Footer from "./Footer.vue";
 import Bottom from "./Bottom.vue";
@@ -203,8 +210,8 @@ import axios from "axios";
 import { __server } from "@jx3box/jx3box-common/data/jx3box.json";
 import { wiki } from "@jx3box/jx3box-common/js/wiki";
 import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
-import Homework from './interact/Homework.vue';
-import { getTopicDetails } from "../service/community"
+import Homework from "./interact/Homework.vue";
+import { getTopicDetails } from "../service/community";
 
 import { isMiniProgram, miniprogramHack } from "@jx3box/jx3box-common/js/utils";
 
@@ -225,6 +232,7 @@ export default {
         // cmsList,
         singlebox,
         // PostHeader,
+        PostVersion,
         PostCollection,
         PostTopic,
 
@@ -271,7 +279,7 @@ export default {
             tab: "post",
 
             post: {},
-            post_id: "77714",
+            post_id: "96614",
 
             author: "",
             wikiPost: null,
@@ -283,12 +291,12 @@ export default {
             upload: "",
             text: `<Text>text="使用：<BUFF 3222 1 desc>，持续<BUFF 3222 1 time>。\\\n" font=105 </text><Text>text="红豆沙做馅儿，精致细腻的广式月饼。" font=100 </text><Text>text="使用：能在唐门套装供应商处换取如下装备。\\\n" font=105 </text><Text>text="[燕云·重泉靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35244 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="，" font=105 </text><Text>text="[燕云·铭松靴]" name="iteminfolink" eventid=513 script="this.nVersion=0 this.dwTabType=7 this.dwIndex=35245 this.OnItemLButtonDown=function() OnItemLinkDown(this) end" font=100 r=255 g=40 b=255 </text><Text>text="。" font=100 </text>`,
 
-            post_topics: post_topics['pve'],
-            tag2: '',
+            post_topics: post_topics["pve"],
+            tag2: "",
 
             homeworkVisible: false,
 
-            community: {}
+            community: {},
         };
     },
     created: function () {

package/src/single/PostVersion.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="m-post-version" v-if="list && list.length">
+        <div class="m-title">
+            <div class="u-title"><i class="el-icon-time"></i> 历史版本</div>
+            <div class="u-op" @click="toggle"><i class="el-icon-d-caret"></i> 折叠</div>
+        </div>
+        <ul v-show="show" class="u-list">
+            <!-- <el-button @click="onAdd">创建</el-button> -->
+            <li v-for="(item, i) in list" class="u-item" :key="i">
+                <div class="u-version">
+                    <span>{{ item.version }}</span> - <span>{{ item.created_at }}</span>
+                </div>
+                <el-button size="small" type="text" @click="handleContrast(item)">对比</el-button>
+            </li>
+        </ul>
+        <el-pagination small layout="prev, pager, next" :total="total" :current-page.sync="index" hide-on-single-page>
+        </el-pagination>
+        <version-dialog
+            v-if="visible"
+            v-model="visible"
+            :link_content_meta_id="link_content_meta_id"
+            :title="title"
+            :content="content"
+            :commit_hash="commit_hash"
+            :versions="list"
+        ></version-dialog>
+    </div>
+</template>
+
+<script>
+import { getCommitHistories, commitHistory } from "../../service/commit-history";
+import VersionDialog from "./VersionDialog.vue";
+export default {
+    name: "PostVersion",
+    props: ["post"],
+    components: { VersionDialog },
+    data() {
+        return {
+            loading: false,
+            index: 1,
+            pageSize: 50,
+            total: 0,
+            list: [],
+            show: true,
+            visible: false,
+            commit_hash: "",
+        };
+    },
+    computed: {
+        link_content_meta_id() {
+            return this.post?.link_content_meta_id || 0;
+        },
+        content() {
+            return this.post?.post_content || "";
+        },
+        title() {
+            return this.post?.post_title || "";
+        },
+        pageParams() {
+            return {
+                index: this.index,
+                pageSize: this.pageSize,
+            };
+        },
+    },
+    watch: {
+        link_content_meta_id: {
+            immediate: true,
+            handler: function (val) {
+                !!val && this.load();
+            },
+        },
+        page() {
+            this.load();
+        },
+    },
+    methods: {
+        onAdd() {
+            commitHistory(this.link_content_meta_id, {
+                commit: "提交测试4",
+                content: `每日机缘4`,
+            })
+                .then((res) => {
+                    this.$message.success("创建成功");
+                    this.load();
+                })
+                .catch((err) => {
+                    this.$message.error(err.message);
+                });
+        },
+        handleContrast(item) {
+            this.commit_hash = item.commit_hash;
+            this.visible = true;
+        },
+        load() {
+            this.loading = true;
+            getCommitHistories(this.link_content_meta_id, this.pageParams)
+                .then((res) => {
+                    const list = res.data?.data?.list || [];
+                    if (list.length) {
+                        this.list = list.map((item, i) => {
+                            return {
+                                ...item,
+                                version: "v" + (list.length - i),
+                            };
+                        });
+                        this.total = res.data?.data?.page?.total || 0;
+                    }
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+        toggle() {
+            this.show = !this.show;
+        },
+    },
+};
+</script>
+<style scoped lang="less">
+.m-post-version {
+    .m-title {
+        .flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 5px;
+        .u-op {
+            font-size: 14px;
+            float: right;
+            padding: 0 5px;
+            line-height: 25px;
+            color: #cdd1db;
+            cursor: pointer;
+            &:hover {
+                color: #a1a9bb;
+            }
+        }
+    }
+    .u-title {
+        font-weight: 300;
+        font-size: 20px;
+    }
+    .u-list {
+        list-style: none;
+        padding: 10px 20px;
+        margin: 0;
+        li {
+            .fz(13px, 36px);
+            .flex;
+            justify-content: space-between;
+            align-items: center;
+            transition: 0.15s ease-in-out;
+            .nobreak;
+            &:hover {
+                background-color: #e6f0fb;
+            }
+        }
+    }
+}
+</style>

package/src/single/Thx.vue

@@ -52,7 +52,7 @@
                     :category="category"
                     @updateRecord="updateRecord"
                 />
-                <watch-later :category="postType" :title="postTitle" :author-id="authorId" :banner="banner" :content-id="postId"></watch-later>
+                <watch-later :category="postType" :title="postTitle" :author-id="authorId" :banner="banner" :content-id="contentMetaId"></watch-later>
                 <Share :postId="postId" :postType="postType" :client="client" />
             </div>
             <div class="w-thx-records">
@@ -148,6 +148,10 @@ export default {
             type: String,
             default: "",
         },
+        contentMetaId: {
+            type: Number,
+            default: 0,
+        },
     },
     components: {
         Like,

package/src/single/VersionDialog.vue

@@ -0,0 +1,235 @@
+<template>
+    <el-dialog
+        custom-class="m-version-contrast-dialog"
+        :title="`版本比对 - ${title}`"
+        :visible="modelValue"
+        append-to-body
+        width="90%"
+        @close="close"
+    >
+        <div class="m-version-container" v-loading="loading">
+            <div class="m-toolbar">
+                <el-radio-group v-model="type">
+                    <el-radio-button :label="item.value" v-for="item in types" :key="item.value">{{
+                        item.label
+                    }}</el-radio-button>
+                </el-radio-group>
+                <div class="m-select">
+                    <el-select
+                        class="u-select"
+                        v-model="version1"
+                        placeholder="请选择版本1"
+                        @change="versionChange($event, 1)"
+                    >
+                        <el-option
+                            v-for="item in versions"
+                            :key="item.id"
+                            :label="item.version"
+                            :value="item.commit_hash"
+                        ></el-option>
+                        <template v-slot:prefix>
+                            <span class="u-label">版本1</span>
+                        </template>
+                    </el-select>
+                    <el-select
+                        class="u-select"
+                        v-model="version2"
+                        placeholder="请选择版本2"
+                        @change="versionChange($event, 2)"
+                    >
+                        <el-option
+                            v-for="item in versions"
+                            :key="item.id"
+                            :label="item.version"
+                            :value="item.commit_hash"
+                        ></el-option>
+                        <template v-slot:prefix> <span class="u-label">版本2</span> </template>
+                    </el-select>
+                </div>
+            </div>
+            <div v-if="type === 'view'" class="m-content-container">
+                <div class="u-content">
+                    <Article :content="content1" />
+                </div>
+                <div class="u-content">
+                    <Article :content="content2" />
+                </div>
+            </div>
+            <div v-if="type === 'code'" class="m-content-container">
+                <code-diff
+                    class="m-content-view"
+                    :old-string="content1"
+                    :new-string="content2"
+                    :context="1024"
+                    output-format="side-by-side"
+                    maxHeight="520px"
+                    :filename="`${content1Len}字`"
+                    :newFilename="`${content2Len}字`"
+                    ignoreMatchingLines="data:image/png;base64,"
+                ></code-diff>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+
+<script>
+import { getCommitByHash } from "../../service/commit-history";
+import Article from "@jx3box/jx3box-editor/src/Article.vue";
+import { CodeDiff } from "v-code-diff";
+export default {
+    name: "VersionDialog",
+    components: {
+        CodeDiff,
+        Article,
+    },
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+        title: {
+            type: String,
+            default: "",
+        },
+        content: {
+            type: String,
+            default: "",
+        },
+        commit_hash: {
+            type: String,
+            default: "",
+        },
+        link_content_meta_id: {
+            type: [Number, String],
+            default: 0,
+        },
+        versions: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    model: {
+        prop: "modelValue",
+        event: "update:modelValue",
+    },
+    emits: ["update:modelValue"],
+    data() {
+        return {
+            loading: false,
+            type: "view",
+            types: [
+                { label: "可视化", value: "view" },
+                { label: "源码", value: "code" },
+            ],
+            version1: "", // 版本1 默认最新，下拉可指定
+            version2: "", // 版本2 默认点击的版本，下拉可指定
+            content1: "",
+            content2: "",
+        };
+    },
+    computed: {
+        content1Len() {
+            const content = this.content1 || "";
+            return content
+                .replace(/(<([^>]+)>)/gi, "")
+                .replace(/\n/g, "")
+                .replace(/\s/g, "")
+                .replaceAll("&nbsp;", "").length;
+        },
+        content2Len() {
+            const content = this.content2 || "";
+            return content
+                .replace(/(<([^>]+)>)/gi, "")
+                .replace(/\n/g, "")
+                .replace(/\s/g, "")
+                .replaceAll("&nbsp;", "").length;
+        },
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(val) {
+                if (val) {
+                    this.content1 = this.content;
+                    console.log(this.content, this.content1);
+                    this.version2 = this.commit_hash;
+                    if (this.version2) {
+                        this.load(this.version2, "content2");
+                    }
+                }
+            },
+        },
+    },
+    methods: {
+        close() {
+            this.$emit("update:modelValue", false);
+        },
+        versionChange(val, i) {
+            if (val) {
+                this[`version${i}`] = val;
+                const key = `content${i}`;
+                this.load(val, key);
+            }
+        },
+        load(hash, key) {
+            if (!this.link_content_meta_id) return;
+            this.loading = true;
+            getCommitByHash(this.link_content_meta_id, hash)
+                .then((res) => {
+                    this[key] = res.data?.data?.content;
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.m-version-contrast-dialog {
+    .el-dialog__body {
+        padding: 0 20px 20px;
+    }
+    .m-toolbar {
+        display: flex;
+        gap: 10px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        .m-select {
+            display: flex;
+            gap: 20px;
+            width: 100%;
+            .u-select {
+                flex: 1;
+            }
+            .el-input--prefix .el-input__inner {
+                padding-left: 55px;
+            }
+            .el-input__prefix {
+                left: 10px;
+                top: 10px;
+            }
+        }
+    }
+    .m-content-container {
+        display: flex;
+        gap: 20px;
+        margin-top: 20px;
+        max-height: 520px;
+        overflow-x: hidden;
+        overflow-y: auto;
+        .u-content {
+            flex: 1;
+            border: 1px solid #ebeef5;
+            padding: 20px;
+            box-sizing: border-box;
+            .r(5px);
+        }
+        .m-content-view {
+            margin: 0;
+        }
+    }
+}
+</style>

package/src/single/cms-single.vue

@@ -181,9 +181,15 @@ export default {
             this.other_authors = other_authors;
         },
         toComment() {
-            this.$refs.commentView.scrollIntoView({
-                block: "start",
-                behavior: "auto",
+            this.$nextTick(() => {
+                const element = this.$refs.commentView;
+                if (element) {
+                    const offsetTop = element.offsetTop + 75;
+                    window.scrollTo({
+                        top: offsetTop,
+                        behavior: "smooth",
+                    });
+                }
             });
         },
     },
@@ -218,8 +224,8 @@ export default {
                     }
                     location.href = `/community/${val}`;
                 }
-            }
-        }
+            },
+        },
     },
 };
 </script>

package/src/single/right-affix.vue

@@ -3,7 +3,7 @@
         <div class="item">
             <fav :postId="postId" :postType="postType" :postTitle="postTitle" :hiddenNum="true" :isOld="true"></fav>
         </div>
-        <el-tooltip v-if="showComment" effect="dark" content="去评论" placement="left">
+        <el-tooltip v-if="showCommentBtn && showComment" effect="dark" content="去评论" placement="left">
             <div class="u-item" @click="toComment">
                 <i class="el-icon-chat-dot-square"></i>
             </div>
@@ -26,7 +26,7 @@ export default {
         return {
             scrollToptimer: null,
             scrollBtnShow: false,
-            isTop: true,
+            showCommentBtn: false, // 等待img等元素加载完毕再显示评论按钮
 
             isOpen: true,
         };
@@ -36,19 +36,10 @@ export default {
     },
     methods: {
         goTop() {
-            //设置定时器
-            const self = this;
-            this.scrollToptimer = setInterval(function () {
-                //获取滚动条距离顶部高度
-                var osTop = document.documentElement.scrollTop || document.body.scrollTop;
-                var ispeed = Math.floor(-osTop / 7);
-                document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
-                //到达顶部，清除定时器
-                if (osTop === 0) {
-                    clearInterval(self.scrollToptimer);
-                }
-                self.isTop = true;
-            }, 30);
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth",
+            });
         },
         toComment() {
             this.$emit("toComment");
@@ -66,13 +57,12 @@ export default {
             } else {
                 self.scrollBtnShow = false;
             }
-            //回到顶部过程中用户滚动滚动条，停止定时器
-            if (!self.isTop) {
-                clearInterval(self.scrollToptimer);
-            }
-            self.isTop = false;
         });
 
+        setTimeout(() => {
+            this.showCommentBtn = true;
+        }, 1000);
+
         Bus.$on("toggleRightSide", (data) => {
             this.isOpen = data;
         });
@@ -120,7 +110,7 @@ export default {
             font-weight: bold;
             color: #3871e0;
         }
-        .w-fav2 svg{
+        .w-fav2 svg {
             .size(26px);
         }
     }

package/vue.config.js

@@ -28,19 +28,19 @@ module.exports = {
         proxy: {
             "/api/vip": {
                 target: "https://pay.jx3box.com",
-                onProxyReq: function(request) {
+                onProxyReq: function (request) {
                     request.setHeader("origin", "");
                 },
             },
             "/api/inspire": {
                 target: "https://pay.jx3box.com",
-                onProxyReq: function(request) {
+                onProxyReq: function (request) {
                     request.setHeader("origin", "");
                 },
             },
             "/api/team": {
-                "target": "https://team.api.jx3box.com",
-                onProxyReq: function(request) {
+                target: "https://team.api.jx3box.com",
+                onProxyReq: function (request) {
                     request.setHeader("origin", "");
                 },
             },
@@ -48,9 +48,9 @@ module.exports = {
                 target: "https://cms.jx3box.com",
                 // target: process.env["DEV_SERVER"] == "true" ? "http://localhost:7100" : "https://cms.jx3box.com",
             },
-			"/api/article": {
-				target: "https://next2.jx3box.com",
-			},
+            "/api/article": {
+                target: "https://next2.jx3box.com",
+            },
             "/api/messages": {
                 target: "https://helper.jx3box.com",
             },
@@ -62,19 +62,25 @@ module.exports = {
             },
             "/api/personal": {
                 target: "https://pay.jx3box.com",
-                onProxyReq: function(request) {
+                onProxyReq: function (request) {
                     request.setHeader("origin", "");
                 },
             },
-            "/api/cny":{
+            "/api/cny": {
                 target: "https://pay.jx3box.com",
-                onProxyReq: function(request) {
+                onProxyReq: function (request) {
+                    request.setHeader("origin", "");
+                },
+            },
+            "/api/next2": {
+                target: "https://dev.next2.jx3box.com",
+                onProxyReq: function (request) {
                     request.setHeader("origin", "");
                 },
             },
             "/api": {
                 target: "https://dev.next2.jx3box.com",
-                onProxyReq: function(request) {
+                onProxyReq: function (request) {
                     request.setHeader("origin", "");
                 },
             },
@@ -102,10 +108,7 @@ module.exports = {
             .tap((options) => Object.assign(options, { limit: 10240 }));
 
         //💝 in-line svg imgs ~
-        config.module
-            .rule("vue")
-            .use("vue-svg-inline-loader")
-            .loader("vue-svg-inline-loader");
+        config.module.rule("vue").use("vue-svg-inline-loader").loader("vue-svg-inline-loader");
 
         //💖 import common less var * mixin ~
         const types = ["vue-modules", "vue", "normal-modules", "normal"];
@@ -116,11 +119,9 @@ module.exports = {
             // path.resolve(__dirname, './src/assets/css/var.less')
         );
         function addStyleResource(rule) {
-            rule.use("style-resource")
-                .loader("style-resources-loader")
-                .options({
-                    patterns: preload_styles,
-                });
+            rule.use("style-resource").loader("style-resources-loader").options({
+                patterns: preload_styles,
+            });
         }
         types.forEach((type) => addStyleResource(config.module.rule("less").oneOf(type)));
     },