feat: 评论新增批改作业功能（喵？

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-comment-ui",
-    "version": "1.8.8",
+    "version": "1.8.9",
     "scripts": {
         "dev": "env DEV_SERVER=true vue-cli-service serve",
         "serve": "vue-cli-service serve",
@@ -11,10 +11,14 @@
     "main": "index.js",
     "dependencies": {
         "@jx3box/jx3box-common": "^8.2.1",
+        "@jx3box/jx3box-common-ui": "^8.6.1",
         "@jx3box/jx3box-emotion": "^1.2.8",
         "core-js": "^3.6.4",
+        "csslab": "^4.0.4",
         "element-ui": "^2.13.1",
         "hevue-img-preview": "^5.0.0",
+        "mitt": "^3.0.1",
+        "style-resources-loader": "^1.5.0",
         "vue": "^2.6.11",
         "vuex": "^3.6.2"
     },

src/Comment.vue

@@ -4,6 +4,12 @@
             <CommentInputForm @submit="userSubmitInputForm" />
             <div class="c-comment-panel">
                 <div class="u-order">
+                    <template v-if="homework">
+                        <div class="u-homework">
+                            <img class="u-homework-icon" src="./assets/img/homework.svg" alt="">
+                            <span>作业模式</span>
+                        </div>
+                    </template>
                     <span class="u-label">排序模式：</span>
                     <el-radio-group
                         v-model="isDesc"
@@ -52,14 +58,15 @@
                         :item="item"
                         :category="category"
                         :power="commentPower"
+                        :user-href="item.userId | profileLink"
+                        :username="item.displayName"
+                        :homework="homework"
                         @deleteComment="deleteComment"
                         @setTopComment="setTopComment"
                         @setStarComment="setStarComment"
                         @setWhiteComment="setWhiteComment"
                         @setLikeComment="setLikeComment"
                         @hide="hideComment"
-                        :user-href="item.userId | profileLink"
-                        :username="item.displayName"
                     />
                 </div>
 
@@ -84,6 +91,8 @@
                 </div>
             </template>
         </el-main>
+
+        <homework v-model="showHomeWork" v-if="homework" :postType="postType" :postId="postData.postId" :client="postData.client" :userId="postData.userId"></homework>
     </el-container>
 </template>
 
@@ -94,13 +103,41 @@ import CommentInputForm from "./components/comment-input-form.vue";
 import CommentAndReply from "./components/comment-and-reply.vue";
 import { GET, POST, DELETE, PUT } from "./service";
 import { getOrderMode, setOrderMode } from "./options";
+import Homework from "@jx3box/jx3box-common-ui/src/interact/Homework.vue";
+import {bus} from "./utils";
 export default {
     name: "Comment",
-    props: ["id", "category", "normal", "order"],
+    props: {
+        id: {
+            type: [String, Number],
+            default: 0,
+        },
+        category: {
+            type: String,
+            default: "post",
+        },
+        normal: {
+            type: Boolean,
+            default: true,
+        },
+        order: {
+            type: String,
+            default: "desc",
+        },
+        homework: {
+            type: Boolean,
+            default: false,
+        },
+        postType: {
+            type: String,
+            default: "comment",
+        },
+    },
     components: {
         CommentAvatar,
         CommentAndReply,
         CommentInputForm,
+        Homework
     },
     data: function () {
         return {
@@ -120,6 +157,14 @@ export default {
             orderByLikes: false,
             openWhiteList: false,
             loading: false,
+
+            // 批改作业
+            showHomeWork: false,
+            postData: {
+                postId: 0,
+                userId: 0,
+                client: location.href.includes("origin") ? "origin" : "std",
+            }
         };
     },
     computed: {
@@ -289,6 +334,15 @@ export default {
             .finally(() => {
                 this.reloadCommentList(1);
             });
+
+        bus.on("homework-click", data => {
+            this.postData = {
+                postId: this.id,
+                userId: data.userId,
+                ...this.postData
+            }
+            this.showHomeWork = true;
+        })
     },
 };
 </script>
@@ -409,6 +463,27 @@ export default {
     b {
         color: #0366d6;
     }
+
+    .u-order {
+        display: flex;
+        align-items: center;
+    }
+
+    .u-homework {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        border: 1px solid #e6a23c;
+        color: #666;
+        padding: 2px 4px;
+        border-radius: 3px;
+        margin-right: 10px;
+    }
+
+    .u-homework-icon {
+        width: 18px;
+        height: 18px;
+    }
 }
 .c-comment-emotion {
     max-height: 168px;

src/components/comment-and-reply-subcomponents-content.vue

@@ -63,7 +63,7 @@
                     class="u-admin"
                     type="text"
                     size="mini"
-                    icon="el-icon-delete"
+                    icon="el-icon-attract"
                     v-if="canHide"
                     @click="hideComment()"
                     title="拉入黑洞后，仅评论者自己独自可见"
@@ -105,6 +105,7 @@
                     @click="starComment(false)"
                     >取消加精</el-button
                 >
+                <el-button class="u-admin" v-if="homework" type="text" icon="el-icon-document-checked" size="mini" @click="onHomeworkClick">批改作业</el-button>
                 <time class="u-date">
                     <i class="el-icon-time"></i>
                     {{ dataFormat(date) }}
@@ -216,6 +217,7 @@ export default {
         "commentId",
         "canAddWhite", // 是否可以添加到过滤白名单， 因为对于一般用户，它看不到非白名单的评论，所以“可以添加到白名单”的权限不要在加一次用户层面的权限判定
         "canRemoveWhite", // 是否可以从过滤白名单移除
+        "homework", // 是否为作业模式
     ],
     components: {
         Uploader,
@@ -370,6 +372,9 @@ export default {
         showPreview: function (val) {
             return resolveImagePath(val);
         },
+        onHomeworkClick() {
+            this.$emit("homework");
+        },
     },
     filters: {
         showAttachment: function (val) {

src/components/comment-and-reply.vue

@@ -33,13 +33,15 @@
             :can-hide="(power.is_author == 1 || power.is_editor == 1)"
             :is-like="item.is_likes == 1"
             :likes="~~item.likes"
+            :homework="homework"
             @addNewReply="addNewReply"
             @deleteComment="deleteComment"
             @setTopComment="setTopComment"
             @setStarComment="setStarComment"
             @setLikeComment="setLikeComment"
             @setWhiteComment="setWhiteComment"
             @hide="hideComment"
+            @homework="onHomework"
         />
         <ReplyList
             :data="replyList"
@@ -59,8 +61,9 @@
 import ContentOfCommentAndReply from "./comment-and-reply-subcomponents-content.vue";
 import ReplyList from "./comment-and-reply-subcomponents-reply-list.vue";
 import { POST, DELETE, GET } from "../service";
+import {bus} from "../utils"
 export default {
-    props: ["item", "baseApi", "power", "user-href", "username"],
+    props: ["item", "baseApi", "power", "user-href", "username", "homework"],
     components: {
         ContentOfCommentAndReply,
         ReplyList
@@ -156,6 +159,9 @@ export default {
         },
         resetReply() {
             this.loadReplyList(1, 3);
+        },
+        onHomework() {
+            bus.emit("homework-click", this.item);
         }
     }
 };

src/components/reply-list-item-comment-content-simple.vue

@@ -72,7 +72,7 @@
                 class="u-admin"
                 type="text"
                 size="mini"
-                icon="el-icon-delete"
+                icon="el-icon-attract"
                 v-if="canHide"
                 @click="hideComment()"
                 title="拉入黑洞后，仅评论者自己独自可见"
@@ -108,6 +108,7 @@ export default {
         "userHref",
         "replyForUsername",
         "replyForUserId",
+        "homework"
     ],
     data: function () {
         return {

src/utils.js

@@ -1,4 +1,5 @@
-import JX3_EMOTION from '@jx3box/jx3box-emotion'
+import JX3_EMOTION from '@jx3box/jx3box-emotion';
+import mitt from 'mitt';
 function escapeHtml(str) {
     return str.replace(/[<>"']/g, function(match) {
       switch (match) {
@@ -18,6 +19,10 @@ async function formatContent(val) {
     return await ins._renderHTML()
 }
 
+const bus = mitt();
+
+
 export {
-    formatContent
+    formatContent,
+    bus
 }

vue.config.js

@@ -1,3 +1,5 @@
+const path = require("path");
+
 module.exports = {
     "devServer": {
         "proxy": {
@@ -32,5 +34,20 @@ module.exports = {
                 };
                 return options
             })
+
+
+        //💖 import common less var * mixin ~
+        const types = ["vue-modules", "vue", "normal-modules", "normal"];
+        var preload_styles = [];
+        preload_styles.push(
+            path.resolve(__dirname, "./node_modules/csslab/base.less"),
+            path.resolve(__dirname, "./node_modules/@jx3box/jx3box-common/css/var.less"),
+        );
+        function addStyleResource(rule) {
+            rule.use("style-resource").loader("style-resources-loader").options({
+                patterns: preload_styles,
+            });
+        }
+        types.forEach((type) => addStyleResource(config.module.rule("less").oneOf(type)));
     }
 }