@jx3box/jx3box-ui 2.0.5 → 2.0.6

package/src/single/RightAffix.vue

@@ -0,0 +1,160 @@
+<template>
+    <div class="c-right-affix" :class="{ 'is-close': !isOpen }">
+        <div class="item">
+            <fav :postId="postId" :postType="postType" :postTitle="postTitle" :hiddenNum="true" :isOld="true"></fav>
+        </div>
+        <el-tooltip v-if="showCommentBtn && showComment" effect="dark" content="去评论" placement="left">
+            <div class="u-item" @click="toComment">
+                <el-icon class="u-icon"><ChatDotSquare></ChatDotSquare></el-icon>
+            </div>
+        </el-tooltip>
+        <el-tooltip effect="dark" content="回到顶部" placement="bottom">
+            <div class="u-item" v-show="scrollBtnShow" @click="goTop">
+                <div class="u-to-top"></div>
+            </div>
+        </el-tooltip>
+    </div>
+</template>
+
+<script>
+import Fav from "../interact/Fav.vue";
+import Bus from "../../utils/bus";
+export default {
+    name: "RightAffix",
+    props: {
+        postId: {
+            type: [String, Number],
+            default: "",
+        },
+        postType: {
+            type: String,
+            default: "",
+        },
+        postTitle: {
+            type: String,
+            default: "",
+        },
+        showComment: {
+            type: [Boolean, Number],
+            default: false,
+        },
+    },
+    data() {
+        return {
+            scrollToptimer: null,
+            scrollBtnShow: false,
+            showCommentBtn: false, // 等待img等元素加载完毕再显示评论按钮
+
+            isOpen: true,
+        };
+    },
+    components: {
+        Fav,
+    },
+    methods: {
+        goTop() {
+            window.scrollTo({
+                top: 0,
+                behavior: "smooth",
+            });
+        },
+        toComment() {
+            this.$emit("toComment");
+        },
+    },
+    mounted() {
+        //获取页面可视区高度
+        var clientHeight = document.documentElement.clientHeight;
+        const self = this;
+        window.addEventListener("scroll", function () {
+            //显示回到顶部按钮
+            var osTop = document.documentElement.scrollTop || document.body.scrollTop;
+            if (osTop >= clientHeight) {
+                self.scrollBtnShow = true;
+            } else {
+                self.scrollBtnShow = false;
+            }
+        });
+
+        setTimeout(() => {
+            this.showCommentBtn = true;
+        }, 1000);
+
+        Bus.on("toggleRightSide", (data) => {
+            this.isOpen = data;
+        });
+    },
+    beforeUnmount() {
+        Bus.off("toggleRightSide");
+    },
+};
+</script>
+
+<style lang="less">
+.closeLeftSidebar() {
+    transition: 0.2s ease-in-out;
+    transform: translateX(100%);
+}
+
+.openLeftSidebar() {
+    transition: 0.2s ease-in-out;
+    transform: translateX(0);
+}
+
+.c-right-affix {
+    .openLeftSidebar();
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    right: @aside-right;
+    top: @header-height + @bread-height + 100px;
+    background-color: #fafbfc;
+    padding: 8px 5px;
+    z-index: 200;
+    border-top-left-radius: 6px;
+    border-bottom-left-radius: 6px;
+    .u-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 32px;
+        height: 32px;
+        cursor: pointer;
+        &:hover {
+            background-color: #f6fcff;
+        }
+        .w-fav2 svg {
+            .size(26px);
+        }
+    }
+    .u-to-top {
+        width: 0;
+        height: 0;
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-bottom: 16px solid #87ceeb;
+    }
+
+    &.is-close {
+        .closeLeftSidebar();
+        right: 42px;
+    }
+
+    .u-icon {
+        font-size: 20px;
+        color: #3871e0;
+    }
+}
+@media screen and (max-width: @smallpc) {
+    .c-right-affix {
+        right: 0;
+    }
+}
+@media screen and (max-width: @phone) {
+    .c-right-affix {
+        .none;
+    }
+}
+</style>

package/src/single/SimpleThx.vue

@@ -29,7 +29,7 @@
                 @updateRecord="updateRecord"
                 :client="client"
             />
-            <el-tooltip effect="dark" content="打赏记录" placement="top-start">
+            <el-tooltip effect="dark" :content="$jx3boxT('jx3boxUi.simpleThx.record', '打赏记录')" placement="top-start">
                 <!-- <div class="w-boxcoin-block"> -->
                 <img
                     src="../../assets/img/widget/records.svg"
@@ -42,7 +42,7 @@
             </el-tooltip>
         </div>
 
-        <el-drawer v-model="showDrawer" title="打赏记录" append-to-body>
+        <el-drawer v-model="showDrawer" :title="$jx3boxT('jx3boxUi.simpleThx.record', '打赏记录')" append-to-body>
             <BoxcoinRecords
                 :postId="postId"
                 :postType="postType"
@@ -63,9 +63,11 @@ import BoxcoinUser from "../interact/BoxcoinUser.vue";
 import BoxcoinRecords from "../interact/BoxcoinRecords.vue";
 import User from "@jx3box/jx3box-common/js/user";
 import { getBoxcoinStatus, getPostBoxcoinConfig } from "../../service/thx";
+import i18nMixin from "../../i18n/mixin";
 
 export default {
     name: "SimpleThx",
+    mixins: [i18nMixin],
     components: {
         Like,
         Fav,

package/src/single/Thx.vue

@@ -57,8 +57,18 @@
         </div>
         <div class="w-thx-copyright">
             &copy;
-            所有原创作品，著作权归作者所有，所有未经授权的非署名转载或抄袭将有权追究法律责任，所有法律事务由专聘律师代理。<br />
-            签约作者独家特约稿件，及所有魔盒官方评分作品用户一经兑现则视为有偿付费稿件，所有商业稿件的转载引用需同时征得魔盒平台授权。
+            {{
+                $jx3boxT(
+                    "jx3boxUi.thx.copyright1",
+                    "所有原创作品，著作权归作者所有，所有未经授权的非署名转载或抄袭将有权追究法律责任，所有法律事务由专聘律师代理。"
+                )
+            }}<br />
+            {{
+                $jx3boxT(
+                    "jx3boxUi.thx.copyright2",
+                    "签约作者独家特约稿件，及所有魔盒官方评分作品用户一经兑现则视为有偿付费稿件，所有商业稿件的转载引用需同时征得魔盒平台授权。"
+                )
+            }}
         </div>
     </div>
 </template>
@@ -76,9 +86,11 @@ import Rss from "../interact/Rss.vue";
 import User from "@jx3box/jx3box-common/js/user";
 import { getBoxcoinStatus, getPostBoxcoinConfig } from "../../service/thx";
 import { getConfig, getUserPermission } from "../../service/cms";
+import i18nMixin from "../../i18n/mixin";
 
 export default {
     name: "ThxComp",
+    mixins: [i18nMixin],
     components: {
         Like,
         Fav,

package/src/single/VersionDialog.vue

@@ -0,0 +1,238 @@
+<template>
+    <el-dialog
+        class="m-version-contrast-dialog"
+        :title="`版本比对 - ${title}`"
+        v-model="visible"
+        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="请选择"
+                        @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="请选择"
+                        @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: () => [],
+        },
+    },
+    emits: ["update:modelValue"],
+    data() {
+        return {
+            loading: false,
+            type: "view",
+            types: [
+                { label: "可视化", value: "view" },
+                { label: "源码", value: "code" },
+            ],
+            version1: "", // 版本1 默认最新，下拉可指定
+            version2: "", // 版本2 默认点击的版本，下拉可指定
+            content1: "",
+            content2: "",
+
+            visible: false,
+        };
+    },
+    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) {
+                this.visible = val;
+                if (val) {
+                    this.content1 = this.content;
+                    this.version2 = this.commit_hash;
+                    if (this.version2) {
+                        this.load(this.version2, "content2");
+                    }
+                }
+            },
+        },
+        visible(val) {
+            this.$emit("update:modelValue", val);
+        }
+    },
+    methods: {
+        close() {
+            this.visible = 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);
+            height: 100%;
+            overflow: hidden;
+        }
+        .m-content-view {
+            margin: 0;
+        }
+    }
+}
+</style>

package/src/stories/components/StoryPropsTable.vue

@@ -0,0 +1,137 @@
+<template>
+    <section class="story-props-table">
+        <div class="story-props-table__header">
+            <div>
+                <div class="story-props-table__eyebrow">Props</div>
+                <h3 class="story-props-table__title">{{ title }}</h3>
+            </div>
+            <p v-if="description" class="story-props-table__desc">{{ description }}</p>
+        </div>
+
+        <div class="story-props-table__body">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Prop</th>
+                        <th>类型</th>
+                        <th>默认值</th>
+                        <th>说明</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="item in items" :key="item.name">
+                        <td>
+                            <code>{{ item.name }}</code>
+                            <span v-if="item.required" class="story-props-table__required">必填</span>
+                        </td>
+                        <td>{{ item.type || '-' }}</td>
+                        <td><code>{{ item.default ?? '-' }}</code></td>
+                        <td>{{ item.description || '-' }}</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </section>
+</template>
+
+<script>
+export default {
+    name: "StoryPropsTable",
+    props: {
+        title: {
+            type: String,
+            default: "组件 Props",
+        },
+        description: {
+            type: String,
+            default: "",
+        },
+        items: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.story-props-table {
+    border-radius: 20px;
+    background: rgba(255, 255, 255, 0.92);
+    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.08);
+    overflow: hidden;
+}
+
+.story-props-table__header {
+    display: flex;
+    justify-content: space-between;
+    gap: 20px;
+    padding: 24px 24px 18px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
+}
+
+.story-props-table__eyebrow {
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #0ea5e9;
+}
+
+.story-props-table__title {
+    margin: 8px 0 0;
+    font-size: 22px;
+    color: #0f172a;
+}
+
+.story-props-table__desc {
+    max-width: 28rem;
+    margin: 0;
+    font-size: 14px;
+    line-height: 1.8;
+    color: #64748b;
+}
+
+.story-props-table__body {
+    overflow-x: auto;
+}
+
+.story-props-table table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.story-props-table th,
+.story-props-table td {
+    padding: 14px 16px;
+    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
+    text-align: left;
+    font-size: 13px;
+    line-height: 1.7;
+    color: #334155;
+    vertical-align: top;
+}
+
+.story-props-table th {
+    font-weight: 700;
+    color: #0f172a;
+    background: rgba(248, 250, 252, 0.9);
+}
+
+.story-props-table code {
+    padding: 2px 6px;
+    border-radius: 999px;
+    background: rgba(15, 23, 42, 0.06);
+    color: #0f172a;
+}
+
+.story-props-table__required {
+    display: inline-block;
+    margin-left: 8px;
+    font-size: 11px;
+    color: #b91c1c;
+    font-weight: 700;
+}
+</style>