@jx3box/jx3box-ui 2.2.15 → 2.2.17

package/i18n/messages/en-US.js

@@ -93,6 +93,8 @@ export default {
             jdt: "Top 100 Dungeons",
             wiki: "Wiki",
             cj: "Achievement Wiki",
+            achievement: "Achievement Wiki",
+            treasure: "Adventure Wiki",
             item: "Item Wiki",
             quest: "Quest Wiki",
             knowledge: "General Wiki",
@@ -321,9 +323,15 @@ export default {
     },
     commentUpload: {
         tip: "Upload up to {count} {types} images, each no larger than {size} MB",
+        tipWithVideo: "Upload up to {count} attachments. Supported: {types}. Images up to {imageSize} MB, videos up to {videoSize} MB",
         exceed: "You can upload up to {count} images!",
+        exceedWithVideo: "You can upload up to {count} attachments!",
+        onlyTypes: "Only {types} image formats are supported!",
+        onlyTypesWithVideo: "Only {types} image and video formats are supported!",
         maxSize: "Each image must be no larger than {size} MB!",
+        maxSizeVideo: "Each video must be no larger than {size} MB!",
         uploadFailed: "Image upload failed!",
+        uploadFailedWithVideo: "Attachment upload failed!",
     },
     quickReply: { title: "Quick Reply" },
     replyForReply: { reply: "Reply", placeholder: "Enter reply...", submit: "Submit", collapse: "Collapse" },
@@ -427,6 +435,7 @@ export default {
     adminDrop: {
         manage: "Manage",
         setting: "Settings",
+        edit: "Edit",
         message: "Message",
         push: "Push",
         pictureTask: "Refresh Image",

package/i18n/messages/vi.js

@@ -93,6 +93,8 @@ export default {
             jdt: "Top 100 Bí Cảnh",
             wiki: "Wiki",
             cj: "Wiki Thành Tựu",
+            achievement: "Wiki Thành Tựu",
+            treasure: "Wiki Kỳ Ngộ",
             item: "Wiki Vật Phẩm",
             quest: "Wiki Nhiệm Vụ",
             knowledge: "Wiki Kiến Thức Chung",
@@ -309,9 +311,15 @@ export default {
     commentWithReply: { defaultName: "Hiệp khách vô danh", top: "Ghim", star: "Nổi bật", secret: "Bí mật", commentSuccess: "Bình luận thành công!", deleteSuccess: "Xóa thành công!" },
     commentUpload: {
         tip: "Tải tối đa {count} ảnh định dạng {types}, mỗi ảnh không quá {size} MB",
+        tipWithVideo: "Tải tối đa {count} tệp đính kèm. Hỗ trợ: {types}. Ảnh không quá {imageSize} MB, video không quá {videoSize} MB",
         exceed: "Chỉ được tải tối đa {count} ảnh!",
+        exceedWithVideo: "Chỉ được tải tối đa {count} tệp đính kèm!",
+        onlyTypes: "Chỉ hỗ trợ ảnh định dạng {types}!",
+        onlyTypesWithVideo: "Chỉ hỗ trợ ảnh và video định dạng {types}!",
         maxSize: "Mỗi ảnh không được vượt quá {size} MB!",
+        maxSizeVideo: "Mỗi video không được vượt quá {size} MB!",
         uploadFailed: "Tải ảnh thất bại!",
+        uploadFailedWithVideo: "Tải tệp đính kèm thất bại!",
     },
     quickReply: { title: "Trả lời nhanh" },
     replyForReply: { reply: "Trả lời", placeholder: "Nhập trả lời...", submit: "Gửi", collapse: "Thu gọn" },
@@ -415,6 +423,7 @@ export default {
     adminDrop: {
         manage: "Quản lý",
         setting: "Cài đặt",
+        edit: "Chỉnh sửa",
         message: "Nhắn tin",
         push: "Đẩy",
         pictureTask: "Làm mới ảnh",

package/i18n/messages/zh-CN.js

@@ -93,6 +93,8 @@ export default {
             jdt: "秘境百强",
             wiki: "百科",
             cj: "成就百科",
+            achievement: "成就百科",
+            treasure: "奇遇百科",
             item: "物品百科",
             quest: "任务百科",
             knowledge: "通识百科",
@@ -379,9 +381,15 @@ export default {
     },
     commentUpload: {
         tip: "最多上传 {count} 张 {types} 格式图片，单张图片不能超过 {size} MB",
+        tipWithVideo: "最多上传 {count} 个附件，支持 {types}，图片不超过 {imageSize} MB，视频不超过 {videoSize} MB",
         exceed: "最多上传 {count} 张图片！",
+        exceedWithVideo: "最多上传 {count} 个附件！",
+        onlyTypes: "仅支持 {types} 格式图片！",
+        onlyTypesWithVideo: "仅支持 {types} 格式的图片和视频！",
         maxSize: "单张图片大小不能超过 {size} MB！",
+        maxSizeVideo: "单个视频大小不能超过 {size} MB！",
         uploadFailed: "图片上传失败!",
+        uploadFailedWithVideo: "附件上传失败!",
     },
     quickReply: {
         title: "快捷回复",
@@ -541,6 +549,7 @@ export default {
     adminDrop: {
         manage: "管理",
         setting: "设置",
+        edit: "编辑",
         message: "私信",
         push: "推送",
         pictureTask: "刷图",

package/i18n/messages/zh-TW.js

@@ -93,6 +93,8 @@ export default {
             jdt: "秘境百強",
             wiki: "百科",
             cj: "成就百科",
+            achievement: "成就百科",
+            treasure: "奇遇百科",
             item: "物品百科",
             quest: "任務百科",
             knowledge: "通識百科",
@@ -314,9 +316,15 @@ export default {
     commentWithReply: { defaultName: "無名小俠", top: "置頂", star: "精華", secret: "悄悄話", commentSuccess: "評論成功!", deleteSuccess: "刪除成功!" },
     commentUpload: {
         tip: "最多上傳 {count} 張 {types} 格式圖片，單張圖片不能超過 {size} MB",
+        tipWithVideo: "最多上傳 {count} 個附件，支援 {types}，圖片不超過 {imageSize} MB，影片不超過 {videoSize} MB",
         exceed: "最多上傳 {count} 張圖片！",
+        exceedWithVideo: "最多上傳 {count} 個附件！",
+        onlyTypes: "僅支援 {types} 格式圖片！",
+        onlyTypesWithVideo: "僅支援 {types} 格式的圖片和影片！",
         maxSize: "單張圖片大小不能超過 {size} MB！",
+        maxSizeVideo: "單個影片大小不能超過 {size} MB！",
         uploadFailed: "圖片上傳失敗!",
+        uploadFailedWithVideo: "附件上傳失敗!",
     },
     quickReply: { title: "快捷回覆" },
     replyForReply: { reply: "回覆", placeholder: "輸入回覆...", submit: "提交", collapse: "收起" },
@@ -420,6 +428,7 @@ export default {
     adminDrop: {
         manage: "管理",
         setting: "設定",
+        edit: "編輯",
         message: "私訊",
         push: "推送",
         pictureTask: "刷圖",

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.2.15",
+    "version": "2.2.17",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/service/comment.js

@@ -8,6 +8,10 @@ const KEY = "cmt_order";
 const { __Links } = JX3BOX;
 const $ = $next({ interceptor: false, mute: true });
 
+function getLocalOrderMode() {
+    return localStorage.getItem(KEY) || "DESC";
+}
+
 export async function getOrderMode() {
     if (User.isLogin()) {
         return $cms({ mute: true })
@@ -17,12 +21,14 @@ export async function getOrderMode() {
                 },
             })
             .then((res) => {
-                return res.data.data;
+                return res.data.data || getLocalOrderMode();
+            })
+            .catch(() => {
+                return getLocalOrderMode();
             });
     } else {
         return new Promise((resolve) => {
-            const key = localStorage.getItem(KEY) || "DESC";
-            resolve(key);
+            resolve(getLocalOrderMode());
         });
     }
 }

package/src/App.vue

@@ -171,7 +171,7 @@
                         <a>100473604</a>
                     </strong>
                 </RightSideMsg>
-                <PostTopic type="bps" :id="48857"></PostTopic>
+                <PostTopic type="bps" :id="0"></PostTopic>
                 <div id="directory"></div>
                 <PostVersion :post="post"></PostVersion>
                 <PostCollection :id="59" />
@@ -232,8 +232,8 @@ export default {
         return {
             tab: "content",
 
-            post_id: "23240",
-            post: "",
+            post_id: "19382",
+            post: {},
             client: location.href.includes("origin") ? "origin" : "std",
             item1: null,
             item2: null,
@@ -249,6 +249,7 @@ export default {
 
             // 通用
             userpop: false,
+            uploadBanner: "",
             homeworkVisible: false,
 
             showSuspendCommon: false,
@@ -277,10 +278,12 @@ export default {
             console.log(data);
         },
         loadPost() {
-            getPost(this.post_id).then((res) => {
-                this.post = res.data.data;
-                this.$forceUpdate();
-            });
+            getPost(this.post_id)
+                .then((res) => {
+                    this.post = res.data.data;
+                    this.$forceUpdate();
+                })
+                .catch(() => {});
         },
         filterMeta(val) {
             console.log(val);
@@ -336,19 +339,23 @@ export default {
         },
         loadCommunity: function () {
             // 72
-            getTopicDetails(4339).then((res) => {
-                this.community = res.data.data;
-            });
+            getTopicDetails(4339)
+                .then((res) => {
+                    this.community = res.data.data;
+                })
+                .catch(() => {});
         },
         loadWiki() {
-            wiki.mix({ type: "achievement", id: 12572, client: this.client }).then((res) => {
-                const { post, source, compatible, isEmpty, users } = res;
-                this.wiki_post = {
-                    post: post,
-                    source: source,
-                    users,
-                };
-            });
+            wiki.mix({ type: "achievement", id: 12572, client: this.client })
+                .then((res) => {
+                    const { post, source, compatible, isEmpty, users } = res;
+                    this.wiki_post = {
+                        post: post,
+                        source: source,
+                        users,
+                    };
+                })
+                .catch(() => {});
         },
     },
     mounted() {

package/src/author/AuthorMedals.vue

@@ -59,7 +59,7 @@ export default {
             });
         },
         showIcon(medal) {
-            return __cdn + "design/medals/user/" + medal + ".gif";
+            return __cdn + "design/medals/user/" + medal + ".webp";
         },
         getMedalLink(medal) {
             if (medal.medal_url) return `${__Root}${medal.medal_url}`;

package/src/comment/CommentContent.vue

@@ -2,14 +2,26 @@
     <div class="u-cmt">
         <div class="u-text" v-if="content != ''" v-html="renderContent"></div>
         <div class="u-attachements" v-if="attachments.length">
-            <el-image
-                v-for="url in attachments"
-                :key="url"
-                :src="showAttachment(url)"
-                :preview-src-list="[showPreview(url)]"
-                lazy
-            ></el-image>
+            <template v-for="url in attachments" :key="url">
+                <video
+                    v-if="isVideoAttachment(url)"
+                    class="u-attachment-video"
+                    :src="showPreview(url)"
+                    playsinline
+                    preload="metadata"
+                    @click="openVideoPreview(url)"
+                ></video>
+                <el-image
+                    v-else
+                    :src="showAttachment(url)"
+                    :preview-src-list="[showPreview(url)]"
+                    lazy
+                ></el-image>
+            </template>
         </div>
+        <el-dialog v-model="videoPreview.visible" class="u-comment-video-dialog" width="min(92vw, 760px)">
+            <video class="u-comment-video-preview" :src="videoPreview.url" controls playsinline></video>
+        </el-dialog>
         <div class="u-toolbar u-toolbar--primary">
             <div class="u-toolbar-left">
                 <el-button v-if="!currentUserHadLike" link size="small" @click="doLike(true)"
@@ -122,6 +134,7 @@
                 <Uploader
                     v-if="showUploader"
                     ref="uploader"
+                    :support-video="supportVideo"
                     @onFinish="attachmentUploadFinish"
                     @onError="attachmentUplodError"
                 />
@@ -146,6 +159,8 @@ import { formatContent } from "../../utils/emotion";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
 import i18nMixin from "../../i18n/mixin";
 
+const VIDEO_EXTENSIONS = ["mp4", "mov", "webm", "m4v"];
+
 function fillZero(num) {
     return num > 9 ? num : `0${num}`;
 }
@@ -212,6 +227,10 @@ export default {
             type: [Boolean, Number],
             default: false,
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         Uploader,
@@ -229,6 +248,10 @@ export default {
             previewList: [],
             currentUserHadLike: this.isLike,
             hasLikeCount: this.likes,
+            videoPreview: {
+                url: "",
+                visible: false,
+            },
 
             renderContent: "",
         };
@@ -368,7 +391,19 @@ export default {
         showPreview: function (val) {
             return resolveImagePath(val);
         },
+        openVideoPreview(val) {
+            this.videoPreview = {
+                url: this.showPreview(val),
+                visible: true,
+            };
+        },
+        isVideoAttachment(val) {
+            const cleanUrl = this.showPreview(val).split("?")[0].split("#")[0];
+            const ext = cleanUrl.split(".").pop()?.toLowerCase() || "";
+            return VIDEO_EXTENSIONS.includes(ext);
+        },
         showAttachment: function (val) {
+            if (this.isVideoAttachment(val)) return this.showPreview(val);
             return resolveImagePath(val) + "?x-oss-process=style/comment_thumb";
         },
     },
@@ -446,6 +481,17 @@ export default {
             .el-image {
                 margin-right: 20px;
             }
+            .u-attachment-video {
+                display: inline-block;
+                width: 180px;
+                height: 120px;
+                max-width: 100%;
+                margin-right: 20px;
+                object-fit: cover;
+                cursor: pointer;
+                background: #000;
+                vertical-align: top;
+            }
         }
     }
     .u-up {
@@ -479,6 +525,25 @@ export default {
     }
 }
 
+.u-comment-video-dialog {
+    margin-top: 5vh;
+
+    .el-dialog__body {
+        max-height: calc(100vh - 120px);
+        padding: 12px;
+        overflow: hidden;
+    }
+}
+
+.u-comment-video-preview {
+    max-width: 100%;
+    max-height: calc(100vh - 160px);
+    display: block;
+    margin: 0 auto;
+    object-fit: contain;
+    background: #000;
+}
+
 .c-comment-subbox {
     margin-top: 10px;
     .el-form-item {

package/src/comment/CommentContentSimple.vue

@@ -11,14 +11,26 @@
             <!-- <p v-for="(p, index) in getPList(content)" :key="index" v-html="formatContent(p)"></p> -->
         </div>
         <div class="u-attachements" v-if="attachments.length">
-            <el-image
-                v-for="url in attachments"
-                :key="url"
-                :src="showAttachment(url)"
-                :preview-src-list="[showPreview(url)]"
-                lazy
-            ></el-image>
+            <template v-for="url in attachments" :key="url">
+                <video
+                    v-if="isVideoAttachment(url)"
+                    class="u-attachment-video"
+                    :src="showPreview(url)"
+                    playsinline
+                    preload="metadata"
+                    @click="openVideoPreview(url)"
+                ></video>
+                <el-image
+                    v-else
+                    :src="showAttachment(url)"
+                    :preview-src-list="[showPreview(url)]"
+                    lazy
+                ></el-image>
+            </template>
         </div>
+        <el-dialog v-model="videoPreview.visible" class="u-comment-video-dialog" width="min(92vw, 760px)">
+            <video class="u-comment-video-preview" :src="videoPreview.url" controls playsinline></video>
+        </el-dialog>
         <div class="u-toolbar">
             <el-button class="u-admin" v-if="!currentUserHadLike" link size="small" @click="doLike(true)"
                 ><img class="u-up" svg-inline src="../../assets/img/comment/heart_1.svg" alt=""/>{{
@@ -73,6 +85,9 @@
 import { resolveImagePath, authorLink } from "@jx3box/jx3box-common/js/utils";
 import { formatContent } from "../../utils/emotion";
 import i18nMixin from "../../i18n/mixin";
+
+const VIDEO_EXTENSIONS = ["mp4", "mov", "webm", "m4v"];
+
 function fillZero(num) {
     return num > 9 ? num : `0${num}`;
 }
@@ -137,6 +152,10 @@ export default {
             showInput: false,
             currentUserHadLike: this.isLike,
             hasLikeCount: this.likes,
+            videoPreview: {
+                url: "",
+                visible: false,
+            },
 
             renderContent: "",
         };
@@ -160,9 +179,21 @@ export default {
         profileLink: function (uid) {
             return authorLink(uid);
         },
+        isVideoAttachment(val) {
+            const cleanUrl = this.showPreview(val).split("?")[0].split("#")[0];
+            const ext = cleanUrl.split(".").pop()?.toLowerCase() || "";
+            return VIDEO_EXTENSIONS.includes(ext);
+        },
         showAttachment: function (val) {
+            if (this.isVideoAttachment(val)) return this.showPreview(val);
             return resolveImagePath(val) + "?x-oss-process=style/comment_thumb";
         },
+        openVideoPreview(val) {
+            this.videoPreview = {
+                url: this.showPreview(val),
+                visible: true,
+            };
+        },
         async formatContent(str) {
             this.renderContent = await formatContent(str);
         },
@@ -265,6 +296,16 @@ export default {
     }
     .u-attachements {
         margin-top: 10px;
+        .u-attachment-video {
+            display: inline-block;
+            width: 180px;
+            height: 120px;
+            max-width: 100%;
+            object-fit: cover;
+            cursor: pointer;
+            background: #000;
+            vertical-align: top;
+        }
     }
     .u-reply-label{
         font-size: 13px;
@@ -275,4 +316,23 @@ export default {
         }
     }
 }
+
+.u-comment-video-dialog {
+    margin-top: 5vh;
+
+    .el-dialog__body {
+        max-height: calc(100vh - 120px);
+        padding: 12px;
+        overflow: hidden;
+    }
+}
+
+.u-comment-video-preview {
+    max-width: 100%;
+    max-height: calc(100vh - 160px);
+    display: block;
+    margin: 0 auto;
+    object-fit: contain;
+    background: #000;
+}
 </style>

package/src/comment/CommentInputForm.vue

@@ -43,6 +43,7 @@
             <Uploader
                 class="u-uploader"
                 ref="uploader"
+                :support-video="supportVideo"
                 @onFinish="attachmentUploadFinish"
                 @onError="attachmentUploadError"
                 v-if="showUploader"
@@ -75,6 +76,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     mounted() {
         if (this.isBottom) this.inputId = "textarea-bottom";

package/src/comment/CommentWithReply.vue

@@ -31,6 +31,7 @@
                     :content="item.content"
                     :comment-id="item.id"
                     :attachments="stringToArray(item.attachments)"
+                    :support-video="supportVideo"
                     :can-delete="power.can_del || power.uid == item.userId"
                     :can-set-top="(power.is_author || power.is_editor) && !item.is_top"
                     :can-cancel-top="(power.is_author || power.is_editor) && item.is_top"
@@ -55,6 +56,7 @@
             :data="replyList"
             :pager="pager"
             :power="power"
+            :support-video="supportVideo"
             @addNewReply="addNewReply"
             @deleteReply="deleteReply"
             @goto="gotoReplyListIndex"
@@ -99,6 +101,10 @@ export default {
             type: String,
             default: "",
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         CommentContent,

package/src/comment/ReplyForReply.vue

@@ -28,6 +28,7 @@
             <Uploader
                 v-if="showUploader"
                 ref="uploader"
+                :support-video="supportVideo"
                 @onFinish="attachmentUploadFinish"
                 @onError="attachmentUploadError"
             />
@@ -66,6 +67,10 @@ export default {
             type: [Number, String],
             default: 0,
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     data: function () {
         return {

package/src/comment/ReplyItem.vue

@@ -33,6 +33,7 @@
             :username="reply.displayName"
             :user-href="profileLink(reply.userId)"
             :current-id="reply.id"
+            :support-video="supportVideo"
             @hideForm="showReplyForReplyFrom = false"
             @doReply="doReply"
         />
@@ -55,6 +56,10 @@ export default {
             type: Object,
             required: true,
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         CommentAvatar,

package/src/comment/ReplyList.vue

@@ -6,6 +6,7 @@
             :key="reply.id"
             :reply="reply"
             :power="power"
+            :support-video="supportVideo"
             @deleteReply="deleteReply"
             @addReply="addReply"
             @setLikeComment="setLikeComment"
@@ -59,6 +60,10 @@ export default {
                 total: 0,
             }),
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         ReplyItem,

package/src/comment/Upload.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="c-comment-upload">
         <el-upload
             action="https://cms.jx3box.com/api/cms/upload"
             ref="upload"
@@ -9,6 +9,7 @@
             :file-list="fileList"
             :limit="maxCount"
             :accept="acceptedExtensions.reduce((acc, cur) => acc + `.${cur},`, '')"
+            :headers="uploadHeaders"
             multiple
             with-credentials
             :on-exceed="onExceed"
@@ -18,58 +19,134 @@
             :on-error="onError"
         >
             <el-icon><Plus></Plus></el-icon>
-            <template #tip>
-                <div class="el-upload__tip">
-                    {{
-                        $jx3boxT(
-                            "jx3boxUi.commentUpload.tip",
-                            "最多上传 {count} 张 {types} 格式图片，单张图片不能超过 {size} MB",
-                            {
-                                count: maxCount,
-                                types: acceptedExtensions.join(" / ").toUpperCase(),
-                                size: maxSize / 1024 / 1024,
-                            }
-                        )
-                    }}
+            <template #file="{ file }">
+                <div class="u-file-card">
+                    <video
+                        v-if="isVideoFile(file)"
+                        class="u-file-video"
+                        :src="showFilePreview(file)"
+                        muted
+                        playsinline
+                        preload="metadata"
+                    ></video>
+                    <img v-else class="el-upload-list__item-thumbnail" :src="showFilePreview(file)" alt="" />
+                    <span class="el-upload-list__item-actions">
+                        <span class="el-upload-list__item-preview" @click.stop="handlePictureCardPreview(file)">
+                            <el-icon><ZoomIn /></el-icon>
+                        </span>
+                        <span class="el-upload-list__item-delete" @click.stop="handleFileRemove(file)">
+                            <el-icon><Delete /></el-icon>
+                        </span>
+                    </span>
                 </div>
             </template>
+            <template #tip>
+                <div class="el-upload__tip">{{ tipText }}</div>
+            </template>
         </el-upload>
-        <el-dialog v-model="dialogVisible">
-            <img width="60%" :src="dialogImageUrl" alt />
+        <el-dialog v-model="dialogVisible" class="u-preview-dialog" width="min(92vw, 760px)">
+            <img v-if="!dialogMediaIsVideo" class="u-preview-image" :src="dialogMediaUrl" alt />
+            <video v-else class="u-preview-video" :src="dialogMediaUrl" controls playsinline></video>
         </el-dialog>
     </div>
 </template>
 
 <script>
 import i18nMixin from "../../i18n/mixin";
+import { getTokenFromUrl } from "@jx3box/jx3box-common/js/utils";
+
+const IMAGE_EXTENSIONS = ["jpg", "jpeg", "png", "gif"];
+const VIDEO_EXTENSIONS = ["mp4", "mov", "webm", "m4v"];
+
 export default {
     name: "CommentUploader",
     mixins: [i18nMixin],
+    props: {
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data() {
         return {
-            dialogImageUrl: "",
+            dialogMediaUrl: "",
+            dialogMediaIsVideo: false,
             dialogVisible: false,
             fileList: [],
             successList: [],
             uploadedMap: {},
 
-            acceptedExtensions: ["jpg", "jpeg", "png", "gif"],
             maxCount: 5,
-            maxSize: 2 * 1024 * 1024,
+            imageMaxSize: 2 * 1024 * 1024,
+            videoMaxSize: 30 * 1024 * 1024,
         };
     },
     emits: ["onFinish", "onError"],
+    computed: {
+        acceptedExtensions() {
+            return this.supportVideo ? [...IMAGE_EXTENSIONS, ...VIDEO_EXTENSIONS] : [...IMAGE_EXTENSIONS];
+        },
+        acceptedLabels() {
+            return this.acceptedExtensions;
+        },
+        tipText() {
+            if (this.supportVideo) {
+                return this.$jx3boxT(
+                    "jx3boxUi.commentUpload.tipWithVideo",
+                    "最多上传 {count} 个附件，支持 {types}，图片不超过 {imageSize} MB，视频不超过 {videoSize} MB",
+                    {
+                        count: this.maxCount,
+                        types: this.acceptedLabels.join(" / ").toUpperCase(),
+                        imageSize: this.imageMaxSize / 1024 / 1024,
+                        videoSize: this.videoMaxSize / 1024 / 1024,
+                    }
+                );
+            }
+
+            return this.$jx3boxT("jx3boxUi.commentUpload.tip", "最多上传 {count} 张 {types} 格式图片，单张图片不能超过 {size} MB", {
+                count: this.maxCount,
+                types: this.acceptedLabels.join(" / ").toUpperCase(),
+                size: this.imageMaxSize / 1024 / 1024,
+            });
+        },
+        uploadHeaders() {
+            const token = this.readAuthToken();
+            if (!token) return {};
+            return {
+                Authorization: `Basic ${btoa(`${token}:cms common request`)}`,
+            };
+        },
+    },
     methods: {
+        readAuthToken() {
+            const tokenFromUrl = getTokenFromUrl();
+            if (tokenFromUrl) return tokenFromUrl;
+            if (typeof localStorage === "undefined") return "";
+            return localStorage.getItem("__token") || localStorage.getItem("token") || "";
+        },
         handlePictureCardPreview(file) {
-            this.dialogImageUrl = file.url;
+            const source = this.showFilePreview(file);
+            this.dialogMediaUrl = source;
+            this.dialogMediaIsVideo = this.isVideoFile(file);
             this.dialogVisible = true;
         },
+        handleFileRemove(file) {
+            if (this.$refs.upload?.handleRemove) {
+                this.$refs.upload.handleRemove(file);
+            } else {
+                this.removeFile(file.uid);
+            }
+        },
         onExceed() {
             this.$notify({
                 title: "",
-                message: this.$jx3boxT("jx3boxUi.commentUpload.exceed", "最多上传 {count} 张图片！", {
-                    count: this.maxCount,
-                }),
+                message: this.supportVideo
+                    ? this.$jx3boxT("jx3boxUi.commentUpload.exceedWithVideo", "最多上传 {count} 个附件！", {
+                          count: this.maxCount,
+                      })
+                    : this.$jx3boxT("jx3boxUi.commentUpload.exceed", "最多上传 {count} 张图片！", {
+                          count: this.maxCount,
+                      }),
                 type: "error",
                 duration: 3000,
                 position: "bottom-right",
@@ -83,11 +160,13 @@ export default {
             if (!this.acceptedExtensions.includes(ext)) {
                 this.$notify({
                     title: "",
-                    message: this.$jx3boxT(
-                        "jx3boxUi.commentUpload.onlyTypes",
-                        "仅支持 {types} 格式图片！",
-                        { types: this.acceptedExtensions.join(" / ").toUpperCase() }
-                    ),
+                    message: this.supportVideo
+                        ? this.$jx3boxT("jx3boxUi.commentUpload.onlyTypesWithVideo", "仅支持 {types} 格式的图片和视频！", {
+                              types: this.acceptedLabels.join(" / ").toUpperCase(),
+                          })
+                        : this.$jx3boxT("jx3boxUi.commentUpload.onlyTypes", "仅支持 {types} 格式图片！", {
+                              types: this.acceptedLabels.join(" / ").toUpperCase(),
+                          }),
                     type: "error",
                     duration: 3000,
                     position: "bottom-right",
@@ -96,16 +175,18 @@ export default {
                 return;
             }
 
-            if (file.size > this.maxSize) {
+            const isVideo = this.isVideoFile(file);
+            const maxSize = isVideo ? this.videoMaxSize : this.imageMaxSize;
+            if (file.size > maxSize) {
                 this.$notify({
                     title: "",
-                    message: this.$jx3boxT(
-                        "jx3boxUi.commentUpload.maxSize",
-                        "单张图片大小不能超过 {size} MB！",
-                        {
-                            size: this.maxSize / 1024 / 1024,
-                        }
-                    ),
+                    message: isVideo
+                        ? this.$jx3boxT("jx3boxUi.commentUpload.maxSizeVideo", "单个视频大小不能超过 {size} MB！", {
+                              size: this.videoMaxSize / 1024 / 1024,
+                          })
+                        : this.$jx3boxT("jx3boxUi.commentUpload.maxSize", "单张图片大小不能超过 {size} MB！", {
+                              size: this.imageMaxSize / 1024 / 1024,
+                          }),
                     type: "error",
                     duration: 3000,
                     position: "bottom-right",
@@ -113,6 +194,10 @@ export default {
                 this.removeFile(file.uid);
                 return;
             }
+
+            if (!file.url && file.raw) {
+                file.url = URL.createObjectURL(file.raw);
+            }
         },
         onRemove(file, fileList) {
             this.fileList = fileList;
@@ -144,7 +229,9 @@ export default {
         onError() {
             this.$notify({
                 title: "",
-                message: this.$jx3boxT("jx3boxUi.commentUpload.uploadFailed", "图片上传失败!"),
+                message: this.supportVideo
+                    ? this.$jx3boxT("jx3boxUi.commentUpload.uploadFailedWithVideo", "附件上传失败!")
+                    : this.$jx3boxT("jx3boxUi.commentUpload.uploadFailed", "图片上传失败!"),
                 type: "error",
                 duration: 3000,
                 position: "bottom-right",
@@ -157,6 +244,13 @@ export default {
                 this.$refs.upload.handleStart(file);
             }
         },
+        isVideoFile(file) {
+            const ext = (file?.name || file?.url || "").split(".").pop()?.toLowerCase() || "";
+            return VIDEO_EXTENSIONS.includes(ext);
+        },
+        showFilePreview(file) {
+            return file?.url || (file?.raw ? URL.createObjectURL(file.raw) : "");
+        },
         removeFile(uid) {
             this.fileList = this.fileList.filter((item) => item.uid !== uid);
             if (uid && this.uploadedMap[uid]) delete this.uploadedMap[uid];
@@ -165,3 +259,46 @@ export default {
     },
 };
 </script>
+
+<style lang="less">
+.c-comment-upload {
+    .u-file-card {
+        width: 100%;
+        height: 100%;
+    }
+
+    .u-file-video {
+        width: 100%;
+        height: 100%;
+        display: block;
+        object-fit: cover;
+        background: #f5f7fa;
+    }
+
+}
+
+.u-preview-dialog {
+    margin-top: 5vh;
+
+    .el-dialog__body {
+        max-height: calc(100vh - 120px);
+        padding: 12px;
+        overflow: hidden;
+        text-align: center;
+    }
+}
+
+.u-preview-image,
+.u-preview-video {
+    max-width: 100%;
+    max-height: calc(100vh - 160px);
+    display: block;
+    margin: 0 auto;
+    object-fit: contain;
+}
+
+.u-preview-video {
+    width: auto;
+    background: #000;
+}
+</style>

package/src/interact/BoxcoinRecords.vue

@@ -144,12 +144,23 @@ export default {
     },
     methods: {
         loadData: function () {
-            getPostBoxcoinRecords(this.postType, this.postId, this.params).then((res) => {
-                this.list = res.data.data?.list || [];
-                this.total = res.data.data.page.total;
-                this.boxcoin = res.data.data.fromManager + res.data.data.fromUser;
-                this.$emit("update:boxcoin", this.boxcoin);
-            });
+            this.loading = true;
+            getPostBoxcoinRecords(this.postType, this.postId, this.params)
+                .then((res) => {
+                    this.list = res.data.data?.list || [];
+                    this.total = res.data.data.page.total;
+                    this.boxcoin = res.data.data.fromManager + res.data.data.fromUser;
+                    this.$emit("update:boxcoin", this.boxcoin);
+                })
+                .catch(() => {
+                    this.list = [];
+                    this.total = 0;
+                    this.boxcoin = 0;
+                    this.$emit("update:boxcoin", 0);
+                })
+                .finally(() => {
+                    this.loading = false;
+                });
         },
         recovery: function (item, i) {
             this.$alert(

package/src/single/CmsSingle.vue

@@ -54,7 +54,7 @@
             <!-- 评论 -->
             <div ref="commentView" class="m-single-comment">
                 <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.cmsSingle.comment", "评论") }}</el-divider>
-                <Comment :id="id" category="post" v-if="id && allow_comment" />
+                <Comment :id="id" category="post" :support-video="supportVideo" v-if="id && allow_comment" />
                 <el-alert
                     :title="$jx3boxT('jx3boxUi.cmsSingle.commentDisabled', '作者没有开启评论功能')"
                     type="warning"
@@ -119,6 +119,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     data: function () {
         return {

package/src/single/Comment.vue

@@ -1,7 +1,7 @@
 <template>
     <el-container class="c-comment" :class="{ 'c-comment-mask': showMask }" v-loading="loading">
         <el-main>
-            <CommentInputForm @submit="userSubmitInputForm" />
+            <CommentInputForm :support-video="supportVideo" @submit="userSubmitInputForm" />
             <div class="c-comment-panel">
                 <div class="u-order">
                     <span class="u-label">{{ $jx3boxT("jx3boxUi.comment.sortMode", "排序模式：") }}</span>
@@ -44,6 +44,7 @@
                         :item="item"
                         :category="category"
                         :power="commentPower"
+                        :support-video="supportVideo"
                         @deleteComment="deleteComment"
                         @setTopComment="setTopComment"
                         @setStarComment="setStarComment"
@@ -59,6 +60,7 @@
                     <CommentInputForm
                         @submit="userSubmitInputForm"
                         :isBottom="commentList.length > 5"
+                        :support-video="supportVideo"
                         v-if="commentList.length > 5"
                     />
                     <div class="u-pages">
@@ -108,6 +110,10 @@ export default {
             type: String,
             default: "",
         },
+        supportVideo: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         // CommentAvatar,

package/src/single/Thx.vue

@@ -249,56 +249,91 @@ export default {
         },
     },
     methods: {
+        resetBoxcoinQuota() {
+            this.admin_max = 0;
+            this.admin_min = 0;
+            this.admin_left = 0;
+            this.admin_total = 0;
+            this.admin_points = [100];
+            this.total_limit = 0;
+            this.post_type_used = 0;
+            this.user_left = 0;
+            this.user_points = [100];
+        },
         loadBoxcoinConfig: function () {
             User.isLogin() &&
-                getPostBoxcoinConfig(this.postType).then((res) => {
-                    this.admin_max = res.data.data.limit.admin_max || 0;
-                    this.admin_min = res.data.data.limit.admin_min || 0;
-                    this.admin_points = res.data.data.limit.admin_points || [10, 1000];
-                    this.admin_left = res.data.data.asManagerBoxCoinRemain || 0;
-                    this.admin_total = res.data.data.asManagerBoxCoinTotal || 0;
-                    this.total_limit = res.data.data.limit.total_limit || 0;
-                    this.post_type_used = res.data.data.asPostTypeBoxcoinHasUsedTotalAtCurrentYear || 0;
+                getPostBoxcoinConfig(this.postType)
+                    .then((res) => {
+                        this.admin_max = res.data.data.limit.admin_max || 0;
+                        this.admin_min = res.data.data.limit.admin_min || 0;
+                        this.admin_points = res.data.data.limit.admin_points || [10, 1000];
+                        this.admin_left = res.data.data.asManagerBoxCoinRemain || 0;
+                        this.admin_total = res.data.data.asManagerBoxCoinTotal || 0;
+                        this.total_limit = res.data.data.limit.total_limit || 0;
+                        this.post_type_used = res.data.data.asPostTypeBoxcoinHasUsedTotalAtCurrentYear || 0;
 
-                    this.user_points = res.data.data.limit.user_points || [10, 1000];
-                    // 根据多端展示剩余币
-                    // 作品是n端，接受n端币+all币
-                    if (this.finalClient == "origin") {
-                        this.user_left = res.data.data.asUserBoxCoinRemainOrigin + res.data.data.asUserBoxCoinRemainAll;
-                    } else if (this.finalClient == "std") {
-                        this.user_left = res.data.data.asUserBoxCoinRemainStd + res.data.data.asUserBoxCoinRemainAll;
-                    } else {
-                        this.user_left =
-                            res.data.data.asUserBoxCoinRemainAll +
-                            res.data.data.asUserBoxCoinRemainStd +
-                            res.data.data.asUserBoxCoinRemainOrigin;
-                    }
+                        this.user_points = res.data.data.limit.user_points || [10, 1000];
+                        // 根据多端展示剩余币
+                        // 作品是n端，接受n端币+all币
+                        if (this.finalClient == "origin") {
+                            this.user_left = res.data.data.asUserBoxCoinRemainOrigin + res.data.data.asUserBoxCoinRemainAll;
+                        } else if (this.finalClient == "std") {
+                            this.user_left = res.data.data.asUserBoxCoinRemainStd + res.data.data.asUserBoxCoinRemainAll;
+                        } else {
+                            this.user_left =
+                                res.data.data.asUserBoxCoinRemainAll +
+                                res.data.data.asUserBoxCoinRemainStd +
+                                res.data.data.asUserBoxCoinRemainOrigin;
+                        }
+                    })
+                    .catch(() => {
+                        this.resetBoxcoinQuota();
+                    });
+            getBoxcoinStatus()
+                .then((res) => {
+                    this.boxcoin_enable = !!~~res.data?.data?.val;
+                })
+                .catch(() => {
+                    this.boxcoin_enable = 0;
                 });
-            getBoxcoinStatus().then((res) => {
-                this.boxcoin_enable = !!~~res.data?.data?.val;
-            });
 
             getConfig({
                 key: "admin_boxcoin_visible",
-            }).then((res) => {
-                this.admin_boxcoin_visible = Number(res?.val);
-            });
+            })
+                .then((res) => {
+                    this.admin_boxcoin_visible = Number(res?.val);
+                })
+                .catch(() => {
+                    this.admin_boxcoin_visible = 1;
+                });
 
             getConfig({
                 key: `level_has_gift_permission`,
-            }).then((res) => {
-                User.isLogin() &&
-                    User.getAsset().then((data) => {
-                        const asset = data;
-                        this.lvEnough = asset && asset.experience >= Number(res?.val);
-                    });
-            });
+            })
+                .then((res) => {
+                    User.isLogin() &&
+                        User.getAsset()
+                            .then((data) => {
+                                const asset = data;
+                                this.lvEnough = asset && asset.experience >= Number(res?.val);
+                            })
+                            .catch(() => {
+                                this.lvEnough = false;
+                            });
+                })
+                .catch(() => {
+                    this.lvEnough = false;
+                });
 
             User.isLogin() &&
-                getUserPermission().then((res) => {
-                    const permissions = res.data.data.permission?.map((item) => item.action);
-                    this.hasPermission = permissions.includes(`manage_boxcoin_${this.postType}`);
-                });
+                getUserPermission()
+                    .then((res) => {
+                        const permissions = res.data.data.permission?.map((item) => item.action);
+                        this.hasPermission = permissions.includes(`manage_boxcoin_${this.postType}`);
+                    })
+                    .catch(() => {
+                        this.hasPermission = false;
+                    });
         },
         // 用户打赏
         updateRecord: function (data) {