@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/comment/QuickReply.vue

@@ -6,10 +6,11 @@
             ref="quickReply"
             trigger="click"
             popper-class="c-jx3box-reply-pop"
+            width="300px"
         >
             <div class="c-jx3box-reply-pop__content">
                 <el-icon class="u-close" @click="closePop"><Close></Close></el-icon>
-                <div class="u-title">快捷回复</div>
+                <div class="u-title">{{ $jx3boxT("jx3boxUi.quickReply.title", "快捷回复") }}</div>
                 <div class="m-reply-list">
                     <div
                         class="m-reply-list__item"
@@ -24,6 +25,7 @@
             <template #reference>
                 <img
                     class="u-reference"
+                    svg-inline
                     width="24"
                     height="24"
                     src="../../assets/img/comment/comment.svg"
@@ -36,8 +38,10 @@
 
 <script>
 import replyTemplate from "../../assets/data/reply_template.json";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "QuickReply",
+    mixins: [i18nMixin],
     data() {
         return {
             replyTemplate,

package/src/comment/ReplyForReply.vue

@@ -1,7 +1,7 @@
 <template>
     <el-form ref="form" class="c-comment-subbox">
         <div class="u-subbox-label">
-            回复
+            {{ $jx3boxT("jx3boxUi.replyForReply.reply", "回复") }}
             <el-link type="primary" target="_blank" :href="userHref"
                 >＠{{ username }}</el-link
             >
@@ -12,7 +12,7 @@
                 type="textarea"
                 v-model="content"
                 :id="'id' + inputId"
-                placeholder="输入回复..."
+                :placeholder="$jx3boxT('jx3boxUi.replyForReply.placeholder', '输入回复...')"
             ></el-input>
         </el-form-item>
         <el-form-item>
@@ -38,10 +38,10 @@
                 type="primary"
                 @click="submitReply"
                 :disabled="disableSubmitBtn"
-                >提交</el-button
+                >{{ $jx3boxT("jx3boxUi.replyForReply.submit", "提交") }}</el-button
             >
             <el-button size="small" link @click="hideForm()"
-                >收起</el-button
+                >{{ $jx3boxT("jx3boxUi.replyForReply.collapse", "收起") }}</el-button
             >
         </el-form-item>
     </el-form>
@@ -50,7 +50,9 @@
 <script>
 import Uploader from "./Upload.vue";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
+import i18nMixin from "../../i18n/mixin";
 export default {
+    mixins: [i18nMixin],
     props: {
         username: {
             type: String,

package/src/comment/ReplyList.vue

@@ -14,8 +14,12 @@
         <!-- 分页 -->
         <el-row v-if="data.length >= 3 || showPager">
             <el-col :span="4">
-                <el-button link v-show="showPager" @click="showLess()">收起</el-button>
-                <el-button link v-show="!showPager" @click="showMore()">查看更多</el-button>
+                <el-button link v-show="showPager" @click="showLess()">{{
+                    $jx3boxT("jx3boxUi.replyList.collapse", "收起")
+                }}</el-button>
+                <el-button link v-show="!showPager" @click="showMore()">{{
+                    $jx3boxT("jx3boxUi.replyList.showMore", "查看更多")
+                }}</el-button>
             </el-col>
             <el-col :span="20" class="c-comment-reply-pages">
                 <el-pagination
@@ -34,7 +38,9 @@
 
 <script>
 import ReplyItem from "./ReplyItem.vue";
+import i18nMixin from "../../i18n/mixin";
 export default {
+    mixins: [i18nMixin],
     props: {
         data: {
             type: Array,
@@ -109,24 +115,28 @@ export default {
     .c-comment-avatar {
         margin-right: 10px;
         width: auto;
-    }
-    .u-avatar {
-        float: left;
-    }
-    .u-avatar-pic {
-        // width: 28px;
-        // height: 28px;
-        margin-right: 10px;
-    }
 
-    .u-name {
-        font-size: 12px;
-        line-height: 28px;
-        padding: 0 !important;
-        display: inline;
-        white-space: nowrap;
-    }
+        .u-avatar {
+            float: left;
+        }
+        .u-avatar-pic {
+            width: 28px;
+            height: 28px;
+            margin-right: 10px;
+            border:1px solid #eee;
+        }
+        .u-avatar-frame{
+            display: none;
+        }
 
+        .u-name {
+            font-size: 13px;
+            line-height: 28px;
+            padding: 0 !important;
+            display: inline;
+            white-space: nowrap;
+        }
+    }
     .u-reply {
         padding: 5px;
         line-height: 1.715;

package/src/comment/Upload.vue

@@ -19,9 +19,17 @@
             <el-icon><Plus></Plus></el-icon>
             <template #tip>
                 <div class="el-upload__tip">
-                    最多上传 {{ maxCount }} 张
-                    {{ acceptedExtensions.join(" / ").toUpperCase() }} 格式图片，单张图片不能超过
-                    {{ maxSize / 1024 / 1024 }} MB
+                    {{
+                        $jx3boxT(
+                            "jx3boxUi.commentUpload.tip",
+                            "最多上传 {count} 张 {types} 格式图片，单张图片不能超过 {size} MB",
+                            {
+                                count: maxCount,
+                                types: acceptedExtensions.join(" / ").toUpperCase(),
+                                size: maxSize / 1024 / 1024,
+                            }
+                        )
+                    }}
                 </div>
             </template>
         </el-upload>
@@ -32,8 +40,10 @@
 </template>
 
 <script>
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "CommentUploader",
+    mixins: [i18nMixin],
     data() {
         return {
             dialogImageUrl: "",
@@ -55,7 +65,9 @@ export default {
         onExceed() {
             this.$notify({
                 title: "",
-                message: `最多上传 ${this.maxCount} 张图片！`,
+                message: this.$jx3boxT("jx3boxUi.commentUpload.exceed", "最多上传 {count} 张图片！", {
+                    count: this.maxCount,
+                }),
                 type: "error",
                 duration: 3000,
                 position: "bottom-right",
@@ -66,7 +78,13 @@ export default {
                 if (file.size > this.maxSize) {
                     this.$notify({
                         title: "",
-                        message: `单张图片大小不能超过 ${this.maxSize / 1024 / 1024} MB！`,
+                        message: this.$jx3boxT(
+                            "jx3boxUi.commentUpload.maxSize",
+                            "单张图片大小不能超过 {size} MB！",
+                            {
+                                size: this.maxSize / 1024 / 1024,
+                            }
+                        ),
                         type: "error",
                         duration: 3000,
                         position: "bottom-right",
@@ -95,7 +113,7 @@ export default {
         onError() {
             this.$notify({
                 title: "",
-                message: "图片上传失败!",
+                message: this.$jx3boxT("jx3boxUi.commentUpload.uploadFailed", "图片上传失败!"),
                 type: "error",
                 duration: 3000,
                 position: "bottom-right",

package/src/filters/clientBy.vue

@@ -2,7 +2,7 @@
     <div class="w-filter-client">
         <ul>
             <li class="u-client" :class="{on: client == ''}" @click="filter('')" v-if="clients">
-                全部
+                {{ $jx3boxT("jx3boxUi.clientBy.all", "全部") }}
             </li>
             <li
                 class="u-client"
@@ -18,13 +18,10 @@
 </template>
 
 <script>
-const clients = {
-    all: "全端",
-    std: "剑三",
-    origin: "缘起",
-};
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "clientBy",
+    mixins: [i18nMixin],
     emits: ["filter"],
     props: {
         type: {
@@ -47,12 +44,17 @@ export default {
     },
     computed: {
         computedClients: function () {
+            const clients = {
+                all: this.$jx3boxT("jx3boxUi.clientBy.allClients", "全端"),
+                std: this.$jx3boxT("jx3boxUi.clientBy.std", "剑三"),
+                origin: this.$jx3boxT("jx3boxUi.clientBy.origin", "缘起"),
+            };
             if (this.showWujie) {
                 return Object.assign({}, this.clients || clients, {
-                    wujie: "无界",
+                    wujie: this.$jx3boxT("jx3boxUi.clientBy.wujie", "无界"),
                 });
             }
-            return clients;
+            return this.clients || clients;
         },
     },
     methods: {

package/src/filters/markBy.vue

@@ -1,37 +1,31 @@
 <template>
-    <span class="w-filter-menu">
-        <el-dropdown>
-            <span class="el-dropdown-link">
-                <span class="u-menu-label"
-                    ><el-icon>
-                        <operation />
-                    </el-icon>
-                    {{ current ? current : deftext
-                    }}<el-icon>
-                        <arrow-down /> </el-icon
-                ></span>
-            </span>
-            <template #dropdown>
-                <el-dropdown-menu>
-                    <el-dropdown-item @click="filter('')">{{ "全部" }}</el-dropdown-item>
-                    <el-dropdown-item v-for="(item, key) in marks" :key="key" @click="filter(key)">{{
-                        item
-                    }}</el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-    </span>
+    <el-dropdown class="w-filter-menu">
+        <span class="el-dropdown-link">
+            <span class="u-menu-label"
+                ><el-icon>
+                    <operation />
+                </el-icon>
+                {{ current ? current : deftext
+                }}<el-icon>
+                    <arrow-down /> </el-icon
+            ></span>
+        </span>
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item @click="filter('')">{{ $jx3boxT("jx3boxUi.markBy.all", "全部") }}</el-dropdown-item>
+                <el-dropdown-item v-for="(item, key) in resolvedMarks" :key="key" @click="filter(key)">{{
+                    item
+                }}</el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
 </template>
 
 <script>
-const default_marks = {
-    newbie: "新手易用",
-    advanced: "进阶推荐",
-    recommended: "编辑精选",
-    geek: "骨灰必备",
-};
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "markBy",
+    mixins: [i18nMixin],
     emits: ["filter"],
     props: {
         placeholder: {
@@ -44,7 +38,7 @@ export default {
         },
         marks: {
             type: Object,
-            default: () => default_marks,
+            default: () => null,
         },
     },
     data: function () {
@@ -55,10 +49,20 @@ export default {
     },
     computed: {
         current: function () {
-            return this.marks[this.mark];
+            return this.resolvedMarks[this.mark];
         },
         deftext: function () {
-            return this.placeholder || "精选";
+            return this.placeholder || this.$jx3boxT("jx3boxUi.markBy.default", "精选");
+        },
+        resolvedMarks: function () {
+            return (
+                this.marks || {
+                    newbie: this.$jx3boxT("jx3boxUi.markBy.newbie", "新手易用"),
+                    advanced: this.$jx3boxT("jx3boxUi.markBy.advanced", "进阶推荐"),
+                    recommended: this.$jx3boxT("jx3boxUi.markBy.recommended", "编辑精选"),
+                    geek: this.$jx3boxT("jx3boxUi.markBy.geek", "骨灰必备"),
+                }
+            );
         },
     },
     methods: {

package/src/filters/menuBy.vue

@@ -1,27 +1,27 @@
 <template>
-    <span class="w-filter-menu" v-if="data">
-        <el-dropdown>
-            <span class="el-dropdown-link">
-                <span class="u-menu-label"
-                    ><el-icon> <operation /> </el-icon>{{ current ? current : deftext
-                    }}<el-icon> <arrow-down /> </el-icon
-                ></span>
-            </span>
-            <template #dropdown>
-                <el-dropdown-menu>
-                    <el-dropdown-item @click="filter('')">{{ "全部" }}</el-dropdown-item>
-                    <el-dropdown-item v-for="(item, key) in data" :key="key" @click="filter(key)">{{
-                        item
-                    }}</el-dropdown-item>
-                </el-dropdown-menu>
-            </template>
-        </el-dropdown>
-    </span>
+    <el-dropdown class="w-filter-menu" v-if="data">
+        <span class="el-dropdown-link">
+            <span class="u-menu-label"
+                ><el-icon> <operation /> </el-icon>{{ current ? current : deftext
+                }}<el-icon> <arrow-down /> </el-icon
+            ></span>
+        </span>
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item @click="filter('')">{{ $jx3boxT("jx3boxUi.menuBy.all", "全部") }}</el-dropdown-item>
+                <el-dropdown-item v-for="(item, key) in data" :key="key" @click="filter(key)">{{
+                    item
+                }}</el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
 </template>
 
 <script>
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "menuBy",
+    mixins: [i18nMixin],
     emits: ["filter"],
     props: {
         data: {
@@ -47,7 +47,7 @@ export default {
             return this.data[this.value];
         },
         deftext: function () {
-            return this.placeholder || "筛选";
+            return this.placeholder || this.$jx3boxT("jx3boxUi.menuBy.default", "筛选");
         },
     },
     methods: {
@@ -67,9 +67,7 @@ export default {
     .u-menu-label {
         .flex;
         align-items: center;
-        i {
-            .mr(5px);
-        }
+        gap: 5px;
         .fz(12px);
     }
 }

package/src/filters/orderBy.vue

@@ -1,7 +1,11 @@
 <template>
     <div class="w-filter-order" :class="{ on: visible }">
         <span class="u-label" @click="toggleFilter">
-            <span class="u-current-order">排序 : {{ current || "最后更新" }}</span>
+            <span class="u-current-order">{{
+                $jx3boxT("jx3boxUi.orderBy.sortLabel", "排序 : {current}", {
+                    current: current || $jx3boxT("jx3boxUi.orderBy.lastUpdate", "最后更新"),
+                })
+            }}</span>
             <span class="u-toggle">
                 <el-icon class="el-icon-arrow-down">
                     <arrow-down />
@@ -16,13 +20,13 @@
                 ><el-icon>
                     <refresh />
                 </el-icon>
-                最后更新</span
+                {{ $jx3boxT("jx3boxUi.orderBy.lastUpdate", "最后更新") }}</span
             >
             <span class="u-mode u-podate" :class="{ on: order == 'podate' }" @click="filter('podate')"
                 ><el-icon>
                     <sort />
                 </el-icon>
-                最早发布</span
+                {{ $jx3boxT("jx3boxUi.orderBy.earliestPublish", "最早发布") }}</span
             >
             <slot></slot>
         </span>
@@ -30,15 +34,10 @@
 </template>
 
 <script>
-const order_map = {
-    update: "最后更新",
-    podate: "最早发布",
-    favs: "收藏最多",
-    likes: "点赞最多",
-    downs: "下载最多",
-};
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "orderBy",
+    mixins: [i18nMixin],
     emits: ["filter"],
     props: {},
     data: function () {
@@ -49,7 +48,14 @@ export default {
     },
     computed: {
         current: function () {
-            return order_map[this.order];
+            const orderMap = {
+                update: this.$jx3boxT("jx3boxUi.orderBy.lastUpdate", "最后更新"),
+                podate: this.$jx3boxT("jx3boxUi.orderBy.earliestPublish", "最早发布"),
+                favs: this.$jx3boxT("jx3boxUi.orderBy.mostFavs", "收藏最多"),
+                likes: this.$jx3boxT("jx3boxUi.orderBy.mostLikes", "点赞最多"),
+                downs: this.$jx3boxT("jx3boxUi.orderBy.mostDownloads", "下载最多"),
+            };
+            return orderMap[this.order];
         },
     },
     methods: {

package/src/filters/tagBy.vue

@@ -5,7 +5,7 @@
                 ><el-icon>
                     <collection-tag />
                 </el-icon>
-                {{ current || "全部" }}</span
+                {{ current || $jx3boxT("jx3boxUi.tagBy.all", "全部") }}</span
             >
             <span class="u-toggle">
                 <el-icon class="el-icon-arrow-down">
@@ -21,7 +21,7 @@
                 ><el-icon>
                     <collection-tag />
                 </el-icon>
-                全部</span
+                {{ $jx3boxT("jx3boxUi.tagBy.all", "全部") }}</span
             >
             <span
                 v-for="(item, key) in data"
@@ -40,8 +40,10 @@
 </template>
 
 <script>
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "tagBy",
+    mixins: [i18nMixin],
     emits: ["filter"],
     props: {
         data: {

package/src/filters/topicBy.vue

@@ -36,8 +36,10 @@
 </template>
 
 <script>
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "topicBy",
+    mixins: [i18nMixin],
     props: {
         topics: {
             type: Array,
@@ -49,38 +51,36 @@ export default {
         },
         label: {
             type: String,
-            default: "主题",
+            default: "",
         },
     },
     emits: ["update:modelValue"],
-    model: {
-        prop: "modelValue",
-        event: "update:modelValue",
-    },
     data() {
         return {
             visible: false,
-            value: "全部",
+            value: "",
         };
     },
     computed: {
         activeText() {
             const { value } = this;
-            return value === "全部" ? this.label : value;
+            const allLabel = this.$jx3boxT("jx3boxUi.topicBy.all", "全部");
+            const defaultLabel = this.label || this.$jx3boxT("jx3boxUi.topicBy.label", "主题");
+            return value === allLabel ? defaultLabel : value;
         },
         computedTopics() {
-            return ["全部", ...this.topics];
+            return [this.$jx3boxT("jx3boxUi.topicBy.all", "全部"), ...this.topics];
         },
     },
     watch: {
         modelValue: {
             immediate: true,
             handler(val) {
-                this.value = val === "" ? "全部" : val;
+                this.value = val === "" ? this.$jx3boxT("jx3boxUi.topicBy.all", "全部") : val;
             },
         },
         value(val) {
-            if (val === "全部") val = "";
+            if (val === this.$jx3boxT("jx3boxUi.topicBy.all", "全部")) val = "";
             this.$emit("update:modelValue", val);
         },
     },
@@ -120,6 +120,8 @@ export default {
         color: #606266;
         font-size: 12px;
         .pointer;
+        .flex(y);
+        gap:5px;
     }
 }
 .w-filter-topic__content {

package/src/filters/versionBy.vue

@@ -2,7 +2,7 @@
     <div class="w-filter-client">
         <ul>
             <li class="u-client" :class="{on: version == ''}" @click="filter('')">
-                双端
+                {{ $jx3boxT("jx3boxUi.versionBy.all", "双端") }}
             </li>
             <li
                 class="u-client"
@@ -16,8 +16,10 @@
 </template>
 
 <script>
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "versionBy",
+    mixins: [i18nMixin],
     props: {
         value: {
             type: [String, Number],
@@ -33,8 +35,8 @@ export default {
     computed: {
         versions: function () {
             const versions = {
-                0: "旗舰",
-                1: "无界"
+                0: this.$jx3boxT("jx3boxUi.versionBy.standard", "旗舰"),
+                1: this.$jx3boxT("jx3boxUi.versionBy.wujie", "无界"),
             }
             return versions;
         },