@jx3box/jx3box-ui 2.0.5 → 2.0.7

package/src/author/AuthorMedals.vue

@@ -2,7 +2,7 @@
     <div class="c-author-medals" v-if="ready">
         <div class="u-label">
             <img svg-inline src="../../assets/img/leftsidebar/medal.svg" />
-            <span>作者荣誉</span>
+            <span>{{ $jx3boxT("jx3boxUi.authorMedals.title", "作者荣誉") }}</span>
         </div>
         <div class="u-medals" v-if="medals && medals.length">
             <el-tooltip
@@ -26,10 +26,12 @@ import * as utilModule from "@jx3box/jx3box-common/js/utils";
 const { getMedalLink } = utilModule;
 import { getUserMedals } from "../../service/author";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import i18nMixin from "../../i18n/mixin";
 const { __cdn, __Root } = JX3BOX;
 
 export default {
     name: "AuthorMedals",
+    mixins: [i18nMixin],
     props: ["uid"],
     components: {},
     data: function () {
@@ -74,10 +76,11 @@ export default {
     .u-medals {
         display: flex;
         flex-wrap: wrap;
+        gap:5px;
+        margin-top: 5px;
     }
     .u-medal {
         cursor: pointer;
-        .mr(2px);
         .u-medal-img {
             width: 20px;
             height: 20px;

package/src/author/AuthorPosts.vue

@@ -2,7 +2,7 @@
     <div class="c-author-posts" v-if="ready">
         <div class="u-label">
             <img svg-inline src="../../assets/img/leftsidebar/post.svg" />
-            <span>最新作品</span>
+            <span>{{ $jx3boxT("jx3boxUi.authorPosts.latest", "最新作品") }}</span>
             <a :href="authorLink(uid)" class="u-more" target="_blank"
                 ><img svg-inline src="../../assets/img/leftsidebar/more.svg"
             /></a>
@@ -11,8 +11,11 @@
         <ul class="u-list" v-if="data && data.length">
             <li v-for="(item, i) in data" :key="i">
                 <a class="u-item" :href="url(item.ID, item.post_type)" target="_blank">
-                    <img svg-inline src="../../assets/img/leftsidebar/arrow.svg" class="u-icon" />
-                    <span class="u-title">{{ item.post_title || item.post_type + "/无标题" }}</span>
+                    <!-- <i class="u-icon">+</i> -->
+                    <span class="u-title">{{
+                        item.post_title ||
+                        $jx3boxT("jx3boxUi.authorPosts.noTitle", "{type}/无标题", { type: item.post_type })
+                    }}</span>
                 </a>
             </li>
         </ul>
@@ -22,8 +25,10 @@
 <script>
 import { authorLink, getLink } from "@jx3box/jx3box-common/js/utils";
 import { getUserPosts } from "../../service/author";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "AuthorPosts",
+    mixins: [i18nMixin],
     props: ["uid"],
     data: function () {
         return {
@@ -66,35 +71,48 @@ export default {
     ul {
         list-style: none;
         margin: 0;
-        padding: 0;
+        padding: 0 0 0 10px;
     }
     li {
-        .db;
+        // .db;
+        &::marker {
+            content: "+";
+            font-size: 10px;
+            color:#999;
+        }
+        list-style-position: outside;
     }
     .u-item {
-        .flex;
-        align-items: center;
+        // display: flex;
+        // align-items: center;
+        display: block;
         gap: 5px;
-        padding: 3px 2px;
+        padding: 3px 2px 3px 5px;
         .nobreak;
         .fz(12px,2);
         color: #666;
-        border-bottom: 1px solid transparent;
+        // border-bottom: 1px solid transparent;
         &:hover {
-            color: @pink;
-            .u-icon {
-                transform: translateX(5px);
-            }
+            color: @color;
+            .underline(@color);
+            font-weight: 500;
+            // .u-icon {
+            //     transform: translateX(5px);
+            // }
         }
     }
     .u-icon {
         .fz(12px);
         .size(12px);
+        .pr;
+        top: -1px;
         // .y;
         color: #999;
         flex: 0 0 auto;
         // .mr(5px);
         transition: all 0.3s;
+        font-style: normal;
+        margin-right: 8px;
     }
     .u-title {
         flex: 1 1 auto;

package/src/author/AuthorRss.vue

@@ -17,8 +17,10 @@
 import { getAuthorRss, subscribeAuthor, unsubscribeAuthor } from "@jx3box/jx3box-common/js/rss";
 import User from "@jx3box/jx3box-common/js/user";
 const jx3box = require("@jx3box/jx3box-common/data/jx3box.json");
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "AuthorRss",
+    mixins: [i18nMixin],
     props: {
         uid: {
             type: Number,
@@ -38,7 +40,9 @@ export default {
     },
     computed: {
         btnText() {
-            return this.subscribed ? "已关注" : "关注";
+            return this.subscribed
+                ? this.$jx3boxT("jx3boxUi.authorRss.followed", "已关注")
+                : this.$jx3boxT("jx3boxUi.authorRss.follow", "关注");
         },
         btnType() {
             return !this.subscribed ? "info" : "warning";
@@ -82,7 +86,7 @@ export default {
                 subscribeAuthor({ id: this.uid, data: { title: this.data?.display_name } })
                     .then(() => {
                         this.subscribed = true;
-                        this.$message.success("关注成功");
+                        this.$message.success(this.$jx3boxT("jx3boxUi.authorRss.followSuccess", "关注成功"));
                     })
                     .catch((err) => {
                         console.log(err);
@@ -98,7 +102,7 @@ export default {
             // }).then(() => {
                 unsubscribeAuthor({ id: this.uid })
                     .then(() => {
-                        this.$message.success("操作成功");
+                        this.$message.success(this.$jx3boxT("jx3boxUi.authorRss.success", "操作成功"));
                         this.subscribed = false;
                     })
                     .catch((err) => {

package/src/author/AuthorTeams.vue

@@ -2,7 +2,7 @@
     <div class="c-author-teams" v-if="ready">
         <div class="u-label">
             <img svg-inline src="../../assets/img/leftsidebar/united.svg" />
-            <span>所在团队</span>
+            <span>{{ $jx3boxT("jx3boxUi.authorTeams.title", "所在团队") }}</span>
         </div>
         <div class="u-teams">
             <el-tooltip
@@ -25,9 +25,11 @@
 <script>
 import { getLink, getThumbnail } from "@jx3box/jx3box-common/js/utils";
 import { getUserPublicTeams } from "../../service/author";
+import i18nMixin from "../../i18n/mixin";
 
 export default {
     name: "AuthorTeams",
+    mixins: [i18nMixin],
     props: ["uid"],
     components: {},
     data: function () {

package/src/author/UserPop.vue

@@ -12,14 +12,16 @@
         <div class="u-input">
             <el-input
                 v-model.trim.lazy="search"
-                placeholder="请输入用户 UID 或者昵称进行搜索"
+                :placeholder="$jx3boxT('jx3boxUi.userPop.placeholder', '请输入用户 UID 或者昵称进行搜索')"
                 @keydown.enter="onSearch"
             >
                 <template #prepend>
                     <el-icon><Search /></el-icon>
                 </template>
             </el-input>
-            <el-button class="u-search-btn" type="primary" @click="onSearch" :disabled="!search">搜索</el-button>
+            <el-button  class="u-search-btn" type="primary" @click="onSearch" :disabled="!search">{{
+                $jx3boxT("jx3boxUi.userPop.search", "搜索")
+            }}</el-button>
         </div>
         <div class="u-preview" v-loading="loading">
             <template v-if="searched && status">
@@ -32,14 +34,18 @@
                 <img class="u-avatar" :src="showAvatar('')" />
                 <span class="u-name">-</span>
                 <div class="u-empty">
-                    <el-icon><Warning /></el-icon>{{ searched ? "未找到匹配项" : "请输入搜索条件" }}
+                    <el-icon><Warning /></el-icon>{{
+                        searched
+                            ? $jx3boxT("jx3boxUi.userPop.notFound", "未找到匹配项")
+                            : $jx3boxT("jx3boxUi.userPop.empty", "请输入搜索条件")
+                    }}
                 </div>
             </template>
         </div>
         <template #footer>
             <div class="dialog-footer">
-                <el-button @click="cancel">取 消</el-button>
-                <el-button type="primary" @click="confirm">确 定</el-button>
+                <el-button  @click="cancel">{{ $jx3boxT("jx3boxUi.common.cancel", "取消") }}</el-button>
+                <el-button  type="primary" @click="confirm">{{ $jx3boxT("jx3boxUi.common.confirm", "确定") }}</el-button>
             </div>
         </template>
     </el-dialog>
@@ -49,9 +55,20 @@
 import * as utilModule from "@jx3box/jx3box-common/js/utils";
 const { showAvatar } = utilModule;
 import { getUserInfoByUidOrName } from "../../service/author";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "UserPop",
-    props: ["title", "show"],
+    mixins: [i18nMixin],
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        modelValue: {
+            type: Boolean,
+            default: false,
+        },
+    },
     data: function () {
         return {
             visible: false,
@@ -66,16 +83,13 @@ export default {
             loading: false,
         };
     },
-    model: {
-        prop: "show",
-        event: "switchUserPop",
-    },
+    emits: ["update:modelValue", "confirm"],
     watch: {
-        show: function (val) {
+        modelValue: function (val) {
             this.visible = val;
         },
         visible: function (val) {
-            this.$emit("switchUserPop", val);
+            this.$emit("update:modelValue", val);
         },
     },
     methods: {
@@ -84,8 +98,8 @@ export default {
                 this.visible = false;
                 this.$emit("confirm", this.userdata);
             } else {
-                this.$alert("用户不存在 或 UID不正确", "提醒", {
-                    confirmButtonText: "确定",
+                this.$alert(this.$jx3boxT("jx3boxUi.userPop.invalid", "用户不存在 或 UID不正确"), this.$jx3boxT("jx3boxUi.userPop.alertTitle", "提醒"), {
+                    confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
                 });
             }
         },
@@ -142,9 +156,7 @@ export default {
     .el-dialog {
         min-width: 520px;
     }
-    .el-dialog__body {
-        padding: 0 20px;
-    }
+
     .u-avatar {
         .mt(20px);
         .size(120px);

package/src/bread/Admin.vue

@@ -1,7 +1,7 @@
 <template>
     <el-drawer
         class="c-admin"
-        title="管理面板"
+        :title="$jx3boxT('jx3boxUi.admin.title', '管理面板')"
         v-model="dialog_visible"
         :before-close="close"
         append-to-body
@@ -11,40 +11,50 @@
     >
         <div class="c-admin-wrapper" ref="adminDrawer">
             <!-- <template v-if="isAdmin"> -->
-            <el-divider content-position="left">状态变更</el-divider>
-            <el-radio-group v-model="post_status" class="c-admin-status">
-                <el-radio-button v-for="(option, key) in status_options" :value="key" :key="key">{{
-                    option
-                }}</el-radio-button>
-            </el-radio-group>
-            <el-button type="primary" class="u-refresh-btn" @click="onRefreshCache">刷新缓存</el-button>
+            <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.admin.status", "状态变更") }}</el-divider>
+            <div class="m-status-op">
+                <el-radio-group v-model="post_status" class="c-admin-status">
+                    <el-radio-button v-for="(option, key) in status_options" :value="key" :key="key">{{
+                        option
+                    }}</el-radio-button>
+                </el-radio-group>
+                <el-button type="primary" class="u-refresh-btn" @click="onRefreshCache">{{
+                    $jx3boxT("jx3boxUi.admin.refreshCache", "刷新缓存")
+                }}</el-button>
+            </div>
             <!-- </template> -->
 
-            <el-divider content-position="left">可见性变更</el-divider>
+            <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.admin.visible", "可见性变更") }}</el-divider>
             <el-radio-group v-model="visible" class="c-admin-status">
                 <el-radio-button v-for="(option, key) in visible_options" :value="key" :key="key">{{
                     option
                 }}</el-radio-button>
             </el-radio-group>
 
-            <el-divider content-position="left">推荐角标</el-divider>
+            <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.admin.mark", "推荐角标") }}</el-divider>
             <el-checkbox-group v-model="mark" class="c-admin-mark">
                 <el-checkbox v-for="(option, key) in mark_options" :value="key" :key="key">{{ option }}</el-checkbox>
             </el-checkbox-group>
 
-            <el-divider content-position="left">高亮置顶</el-divider>
-            <el-checkbox class="c-admin-highlight-checkbox" v-model="isSticky">置顶</el-checkbox>
-            <el-checkbox class="c-admin-highlight-checkbox" v-model="isHighlight">开启高亮</el-checkbox>
+            <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.admin.highlight", "高亮置顶") }}</el-divider>
+            <el-checkbox class="c-admin-highlight-checkbox" v-model="isSticky">{{
+                $jx3boxT("jx3boxUi.admin.sticky", "置顶")
+            }}</el-checkbox>
+            <el-checkbox class="c-admin-highlight-checkbox" v-model="isHighlight">{{
+                $jx3boxT("jx3boxUi.admin.enableHighlight", "开启高亮")
+            }}</el-checkbox>
             <template v-if="isHighlight">
                 <el-color-picker
                     class="c-admin-highlight-block"
                     v-model="color"
                     :predefine="color_options"
                 ></el-color-picker>
-                <span class="c-admin-highlight-preview" :style="{ color: color }">预览高亮效果</span>
+                <span class="c-admin-highlight-preview" :style="{ color: color }">{{
+                    $jx3boxT("jx3boxUi.admin.previewHighlight", "预览高亮效果")
+                }}</span>
             </template>
 
-            <el-divider content-position="left">封面海报</el-divider>
+            <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.admin.banner", "封面海报") }}</el-divider>
             <div class="c-admin-banner">
                 <el-upload
                     class="c-admin-upload el-upload--picture-card"
@@ -59,25 +69,25 @@
                 </el-upload>
                 <el-input class="u-banner" v-model="post_banner">
                     <template #prepend>
-                        <span>海报地址</span>
+                        <span>{{ $jx3boxT("jx3boxUi.admin.bannerUrl", "海报地址") }}</span>
                     </template>
                     <template #append>
                         <span>
                             <span class="u-btn" @click="removeBanner">
-                                <el-icon><CircleClose /></el-icon> 移除海报
+                                <el-icon><CircleClose /></el-icon> {{ $jx3boxT("jx3boxUi.admin.removeBanner", "移除海报") }}
                             </span>
                         </span>
                     </template>
                 </el-input>
             </div>
 
-            <el-divider content-position="left">元信息</el-divider>
+            <el-divider content-position="left">{{ $jx3boxT("jx3boxUi.admin.meta", "元信息") }}</el-divider>
             <div class="c-admin-info">
                 <div class="w-select c-admin-type">
-                    <div class="u-select-label">板块</div>
+                    <div class="u-select-label">{{ $jx3boxT("jx3boxUi.admin.section", "板块") }}</div>
                     <el-select
                         v-model="post_type"
-                        placeholder="请选择板块"
+                        :placeholder="$jx3boxT('jx3boxUi.admin.sectionPlaceholder', '请选择板块')"
                         style="width: 100%"
                         class="u-select drawer-item-content"
                         :disabled="appDisabled"
@@ -91,17 +101,21 @@
                     </el-select>
                 </div>
                 <div class="c-admin-author">
-                    <el-input v-model="post_author" placeholder="请输入作者ID" class="input-author drawer-item-content">
+                    <el-input
+                        v-model="post_author"
+                        :placeholder="$jx3boxT('jx3boxUi.admin.authorPlaceholder', '请输入作者ID')"
+                        class="input-author drawer-item-content"
+                    >
                         <template #prepend>
-                            <span class="u-keyword">作者ID</span>
+                            <span class="u-keyword">{{ $jx3boxT("jx3boxUi.admin.authorId", "作者ID") }}</span>
                         </template>
                     </el-input>
                 </div>
             </div>
 
             <div class="c-admin-buttons">
-                <el-button type="primary" @click="submit" :loading="pushing">提交</el-button>
-                <el-button plain @click="close">取消</el-button>
+                <el-button type="primary" @click="submit" :loading="pushing">{{ $jx3boxT("jx3boxUi.admin.submit", "提交") }}</el-button>
+                <el-button plain @click="close">{{ $jx3boxT("jx3boxUi.common.cancel", "取消") }}</el-button>
             </div>
         </div>
     </el-drawer>
@@ -117,11 +131,13 @@ import User from "@jx3box/jx3box-common/js/user";
 import CMS_MARKS from "@jx3box/jx3box-common/data/mark.json";
 import { getTopicBucket } from "../../service/cms";
 import emitter from "../../utils/bus";
+import i18nMixin from "../../i18n/mixin";
 
 const { cms: marks } = CMS_MARKS;
 // import { onClickOutside } from "@vueuse/core";
 export default {
     name: "BreadAdmin",
+    mixins: [i18nMixin],
     emits: ["update"],
     props: {
         marksOptions: {
@@ -176,10 +192,10 @@ export default {
             // 状态
             post_status: "publish",
             status_options: {
-                publish: "默认",
-                draft: "草稿",
-                pending: "待审核",
-                dustbin: "删除",
+                publish: this.$jx3boxT("jx3boxUi.admin.statusDefault", "默认"),
+                draft: this.$jx3boxT("jx3boxUi.admin.statusDraft", "草稿"),
+                pending: this.$jx3boxT("jx3boxUi.admin.statusPending", "待审核"),
+                dustbin: this.$jx3boxT("jx3boxUi.admin.statusDeleted", "删除"),
             },
             visible: "0",
             visible_options: JX3BOX.__visibleMap,
@@ -276,7 +292,7 @@ export default {
             this.post_banner = res.data[0];
         },
         uploadFail: function (err) {
-            this.$message.error("上传失败");
+            this.$message.error(this.$jx3boxT("jx3boxUi.admin.uploadFailed", "上传失败"));
             console.log(err);
         },
         removeBanner: function () {
@@ -340,7 +356,7 @@ export default {
                         data: this.data,
                     });
                     this.$message({
-                        message: "设置成功",
+                        message: this.$jx3boxT("jx3boxUi.admin.success", "设置成功"),
                         type: "success",
                     });
                 })
@@ -392,7 +408,7 @@ export default {
         this.checkChannel();
 
         // 绑定监听
-        Bus.on("toggleAdminPanel", () => {
+        this.__toggleAdminPanelHandler = () => {
             this.dialog_visible = !this.dialog_visible;
             this.checkPostID();
             // 文章类型的加载
@@ -403,7 +419,14 @@ export default {
             if (this.showExtend && this.app && this.dialog_visible) {
                 this.loadTopic();
             }
-        });
+        };
+        Bus.on("toggleAdminPanel", this.__toggleAdminPanelHandler);
+    },
+    beforeUnmount() {
+        if (this.__toggleAdminPanelHandler) {
+            Bus.off("toggleAdminPanel", this.__toggleAdminPanelHandler);
+            this.__toggleAdminPanelHandler = null;
+        }
     },
 };
 </script>

package/src/bread/AdminDirectMessage.vue

@@ -5,15 +5,17 @@
         v-if="isEditor"
     >
         <el-icon><Message></Message></el-icon>
-        <span>私信</span>
+        <span>{{ $jx3boxT("jx3boxUi.adminDirectMessage.button", "私信") }}</span>
     </a>
 </template>
 
 <script>
 import { sendMessage } from "../../service/admin";
 import User from "@jx3box/jx3box-common/js/user";
+import i18nMixin from "../../i18n/mixin";
 export default {
     name: "AdminDirectMessage",
+    mixins: [i18nMixin],
     props: {
         size: {
             type: String,
@@ -39,13 +41,16 @@ export default {
     },
     methods: {
         onButtonClick() {
-            this.$prompt("请输入私信内容", "管理私信", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                inputPlaceholder: "请输入私信内容",
+            this.$prompt(
+                this.$jx3boxT("jx3boxUi.adminDirectMessage.input", "请输入私信内容"),
+                this.$jx3boxT("jx3boxUi.adminDirectMessage.title", "管理私信"),
+                {
+                confirmButtonText: this.$jx3boxT("jx3boxUi.common.confirm", "确定"),
+                cancelButtonText: this.$jx3boxT("jx3boxUi.common.cancel", "取消"),
+                inputPlaceholder: this.$jx3boxT("jx3boxUi.adminDirectMessage.input", "请输入私信内容"),
                 inputValidator: (value) => {
                     if (!value) {
-                        return "请输入私信内容";
+                        return this.$jx3boxT("jx3boxUi.adminDirectMessage.input", "请输入私信内容");
                     }
                 },
                 beforeClose: (action, instance, done) => {
@@ -54,12 +59,14 @@ export default {
                             source_id: this.sourceId,
                             source_type: this.sourceType,
                             user_id: this.userId,
-                            content: "运营通知：" + instance.inputValue,
+                            content:
+                                this.$jx3boxT("jx3boxUi.adminDirectMessage.noticePrefix", "运营通知：") +
+                                instance.inputValue,
                             type: "system",
                             subtype: "admin_message"
                         };
                         sendMessage(data).then(() => {
-                            this.$message.success("私信成功");
+                            this.$message.success(this.$jx3boxT("jx3boxUi.adminDirectMessage.success", "私信成功"));
                             done();
                         })
                     } else {