@jx3box/jx3box-ui 2.3.21 → 2.3.22

package/i18n/messages/zh-TW.js

@@ -486,7 +486,9 @@ export default {
     migrateCommunity: { title: "遷回原版塊", postTitle: "標題", author: "作者", originalSection: "原版塊", originalLink: "原連結", notAvailable: "此貼文不可遷移，不存在原貼文", confirm: "確認將此貼文遷回原版塊？", success: "遷移成功" },
     moveCommunity: { title: "遷移至論壇", category: "分類", categoryPlaceholder: "請選擇貼文分類", introduction: "簡介", contentPlaceholder: "請輸入內容", images: "附圖", irreversibleTip: "請確認此操作不可逆", irreversible: "我已確認此操作不可逆", missingPost: "文章ID不存在!", selectCategory: "請選擇分類!" },
     wiki: { loading: "🎉 資料載入中...", loadFailed: "⚠️ 資料載入異常", empty: "💧 暫無資料", reply: "回覆", nickname: "暱稱：", mysterious: "神祕俠士" },
-    wikiPanel: { contributors: "參與貢獻", difficulty: "綜合難度", popularity: "熱度", updatedAt: "更新時間" },
+    wikiPanel: { contributors: "參與貢獻", difficulty: "綜合難度", popularity: "熱度", updatedAt: "更新時間", qrTrigger: "QR Code", qrScanToVisit: "掃描即可瀏覽" },
     wikiComments: { title: "百科評論", empty: "💧 暫無評論", contentRequired: "請先填寫評論內容再嘗試提交", submitSuccess: "提交成功，請等待審核" },
     wikiRevisions: { title: "歷史版本", version: "版本", contributor: "貢獻者", remark: "修訂說明" },
+    wikiComment: { top: "置頂", star: "精華", collapse: "收起", setStar: "設為精華", cancelStar: "取消精華", setTop: "置頂", cancelTop: "取消置頂", publishUnavailable: "發布評論異常，請聯絡管理員", actionUnavailable: "操作異常，請聯絡管理員" },
+    gamePrice: { zhuan: "磚", jin: "金", yin: "銀", tong: "銅" },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.3.21",
+    "version": "2.3.22",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {
@@ -13,6 +13,7 @@
         "build:dev": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service build --mode development",
         "build:prod": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vue-cli-service build --mode production",
         "lint": "vue-cli-service lint",
+        "test:i18n": "node --test tests/wiki-i18n-contract.test.js",
         "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-data@latest @jx3box/jx3box-editor@latest @jx3box/jx3box-emotion@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest"
     },
     "eslintConfig": {

package/src/App.vue

@@ -111,27 +111,36 @@
                     </el-radio-group>
                     <singlebox :post="post" />
                 </el-tab-pane>
-                <el-tab-pane label="百科组件" name="wiki">
+                <el-tab-pane class="m-pvx-wiki-demo" label="百科组件" name="wiki">
                     <h1 class="m-title">游戏价格组件</h1>
-                    <div class="m-block">
-                        <GamePrice :price="100009999" :align="true"></GamePrice>
+                    <div class="m-block m-game-price-demo">
+                        <GamePrice
+                            :price="100009999"
+                            :align="true"
+                            variant="surface"
+                        ></GamePrice>
+                        <GamePrice
+                            :price="-20800"
+                            variant="surface"
+                            style="--jx3box-ui-game-price-negative-color: #e11d48"
+                        ></GamePrice>
                     </div>
 
-                    <h1 class="m-title">百科面板</h1>
                     <div class="m-block">
-                        <WikiPanel :wiki-post="wiki_post">
-                            <template #head-title>奇遇攻略</template>
+                        <WikiPanel :wiki-post="wiki_post" variant="surface">
+                            <template #head-title>
+                                <i class="u-icon el-icon-document"></i>
+                                <span class="u-txt">奇遇攻略</span>
+                            </template>
                         </WikiPanel>
                     </div>
 
-                    <h1 class="m-title">百科评论</h1>
                     <div class="m-block">
-                        <WikiComments :source-id="12572" type="achievement" />
+                        <WikiComments :source-id="12572" type="achievement" variant="surface" />
                     </div>
 
-                    <h1 class="m-title">百科修订</h1>
                     <div class="m-block">
-                        <WikiRevisions type="achievement" :source-id="12572" />
+                        <WikiRevisions type="achievement" :source-id="12572" variant="surface" />
                     </div>
                 </el-tab-pane>
                 <el-tab-pane label="移动组件" name="mobile">
@@ -379,4 +388,38 @@ export default {
     flex-direction: column;
     gap: 20px;
 }
+
+.m-pvx-wiki-demo {
+    padding: 24px;
+    background: #f6f8fa;
+
+    > .m-title:first-child {
+        margin-top: 0;
+    }
+
+    > .m-block {
+        padding: 0;
+    }
+
+    > .m-block + .m-block {
+        margin-top: 24px;
+    }
+}
+
+.m-game-price-demo {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: 20px;
+}
+
+@media screen and (max-width: 720px) {
+    .m-pvx-wiki-demo {
+        padding: 16px;
+
+        > .m-block + .m-block {
+            margin-top: 20px;
+        }
+    }
+}
 </style>

package/src/interact/QRcode.vue

@@ -1,12 +1,18 @@
 <template>
     <div ref="trigger" class="w-qrcode" v-bind="$attrs" @click="togglePic" v-if="mode == 'cms'">
         <img class="u-icon" svg-inline src="../../assets/img/widget/qr-code.svg" />
-        <span class="u-text">二维码</span>
+        <span class="u-text">{{ triggerText }}</span>
     </div>
     <teleport to="body">
-        <div v-if="mode == 'cms' && active" class="u-qrcode u-qrcode-popup w-qrcode-static" :style="popupStyle" @click.stop>
+        <div
+            v-if="mode == 'cms' && active"
+            class="u-qrcode u-qrcode-popup w-qrcode-static"
+            :class="popupClass"
+            :style="popupStyle"
+            @click.stop
+        >
             <qrcode-vue class="u-pic" :value="value" :size="size" level="H"></qrcode-vue>
-            <span class="u-txt">扫一扫即可访问</span>
+            <span class="u-txt">{{ popupText }}</span>
         </div>
     </teleport>
     <div class="w-qrcode-static" v-bind="$attrs" v-if="mode == 'static'">
@@ -38,6 +44,18 @@ export default {
             type: Number,
             default: 100,
         },
+        triggerText: {
+            type: String,
+            default: "二维码",
+        },
+        popupText: {
+            type: String,
+            default: "扫一扫即可访问",
+        },
+        popupClass: {
+            type: [String, Array, Object],
+            default: "",
+        },
     },
     data: function () {
         return {

package/src/wiki/GamePrice.vue

@@ -1,11 +1,11 @@
 <template>
-    <span class="c-game-price" :class="alignClass">
+    <span class="c-game-price" :class="rootClasses">
         <span class="u-neg" v-if="numericPrice < 0">- </span>
         <span class="u-price">
             <template v-for="part in priceParts" :key="part.unit">
                 <span class="u-part" :class="`u-${part.unit}`">
                     <span class="u-price-value">{{ part.value }}</span>
-                    <img :src="part.icon" :alt="part.alt" />
+                    <img :src="part.icon" :alt="$jx3boxT(`jx3boxUi.gamePrice.${part.unit}`, part.alt)" />
                 </span>
             </template>
         </span>
@@ -36,16 +36,38 @@ export default {
             type: [Boolean, String],
             default: false,
         },
+        variant: {
+            type: String,
+            default: "default",
+            validator: (value) => ["default", "surface", "plain"].includes(value),
+        },
+        size: {
+            type: String,
+            default: "medium",
+            validator: (value) => ["small", "medium", "large"].includes(value),
+        },
+        layout: {
+            type: String,
+            default: "inline",
+            validator: (value) => ["inline", "block"].includes(value),
+        },
+        wrap: {
+            type: Boolean,
+            default: true,
+        },
     },
     computed: {
         numericPrice() {
             const value = Number(this.price);
             return Number.isFinite(value) ? Math.trunc(value) : 0;
         },
-        alignClass() {
-            if (this.align === true) return "is-align";
-            if (typeof this.align === "string" && this.align) return `is-${this.align}`;
-            return "";
+        rootClasses() {
+            const classes = [`is-${this.variant}`, `is-size-${this.size}`, `is-layout-${this.layout}`];
+            if (this.align === true) classes.push("is-align");
+            if (typeof this.align === "string" && this.align) classes.push(`is-${this.align}`);
+            if (!this.wrap) classes.push("is-nowrap");
+            if (this.numericPrice < 0) classes.push("is-negative");
+            return classes;
         },
         priceParts() {
             const value = Math.abs(this.numericPrice);
@@ -75,21 +97,28 @@ export default {
 
 <style lang="less">
 .c-game-price {
+    --jx3box-ui-game-price-color: #333;
+    --jx3box-ui-game-price-icon-size: 18px;
+    --jx3box-ui-game-price-font-size: 12px;
+    --jx3box-ui-game-price-gap: 6px;
+    --jx3box-ui-game-price-negative-color: var(--jx3box-ui-game-price-color);
+
     display: inline-flex;
     align-items: center;
-    color: #333;
+    color: var(--jx3box-ui-game-price-color);
     font-weight: 500;
 
     .u-price {
         display: inline-flex;
         align-items: center;
         flex-wrap: wrap;
-        gap: 6px;
+        gap: var(--jx3box-ui-game-price-gap);
     }
 
     .u-neg {
         display: inline-flex;
         align-items: center;
+        color: var(--jx3box-ui-game-price-negative-color);
     }
 
     .u-part {
@@ -100,14 +129,15 @@ export default {
     }
 
     img {
-        width: 18px;
-        height: 18px;
+        width: var(--jx3box-ui-game-price-icon-size);
+        height: var(--jx3box-ui-game-price-icon-size);
         object-fit: contain;
         vertical-align: middle;
     }
 
     .u-price-value {
-        .fz(12px,18px);
+        font-size: var(--jx3box-ui-game-price-font-size);
+        line-height: var(--jx3box-ui-game-price-icon-size);
     }
 
     &.is-align {
@@ -130,5 +160,32 @@ export default {
         justify-content: flex-end;
         width: 100%;
     }
+
+    &.is-size-small {
+        --jx3box-ui-game-price-icon-size: 14px;
+        --jx3box-ui-game-price-font-size: 11px;
+        --jx3box-ui-game-price-gap: 4px;
+    }
+
+    &.is-size-large {
+        --jx3box-ui-game-price-icon-size: 22px;
+        --jx3box-ui-game-price-font-size: 14px;
+        --jx3box-ui-game-price-gap: 8px;
+    }
+
+    &.is-layout-block {
+        display: flex;
+        width: 100%;
+    }
+
+    &.is-nowrap {
+        .u-price {
+            flex-wrap: nowrap;
+        }
+    }
+
+    &.is-surface {
+        --jx3box-ui-game-price-color: #334155;
+    }
 }
 </style>

package/src/wiki/WikiComment.vue

@@ -11,7 +11,7 @@
                         v-text="comment.user_nickname"
                     ></a>
                     <template v-if="comment.parent_id">
-                        <span>&nbsp;回复&nbsp;</span>
+                        <span>&nbsp;{{ $jx3boxT("jx3boxUi.wiki.reply", "回复") }}&nbsp;</span>
                         <a
                             class="u-nickname"
                             :href="comment.parent.user_id ? author_url(comment.parent.user_id) : null"
@@ -21,11 +21,11 @@
                     </template>
                     <span class="u-mark u-top" v-if="comment.is_top">
                         <i class="el-icon-download"></i>
-                        置顶
+                        {{ $jx3boxT("jx3boxUi.wikiComment.top", "置顶") }}
                     </span>
                     <span class="u-mark u-star" v-if="comment.is_star">
                         <i class="el-icon-star-on"></i>
-                        精华
+                        {{ $jx3boxT("jx3boxUi.wikiComment.star", "精华") }}
                     </span>
                 </div>
                 <p class="u-content" v-html="comment.content"></p>
@@ -38,9 +38,11 @@
                         class="u-reply"
                         @click="comment.reply_form.show = !comment.reply_form.show"
                         size="small"
+                        :aria-expanded="true"
+                        :aria-controls="`wiki-comment-reply-${comment.id}`"
                     >
                         <i class="el-icon-arrow-up"></i>
-                        <span>收起</span>
+                        <span>{{ $jx3boxT("jx3boxUi.wikiComment.collapse", "收起") }}</span>
                     </el-button>
                     <el-button
                         type="primary"
@@ -50,8 +52,10 @@
                         @click="comment.reply_form.show = !comment.reply_form.show"
                         icon="ChatDotRound"
                         size="small"
+                        :aria-expanded="false"
+                        :aria-controls="`wiki-comment-reply-${comment.id}`"
                     >
-                        <span>回复</span>
+                        <span>{{ $jx3boxT("jx3boxUi.wiki.reply", "回复") }}</span>
                     </el-button>
                     <template v-if="isEditor && !comment.parent_id">
                         <el-button
@@ -61,25 +65,43 @@
                             plain
                             :icon="comment.is_star ? 'StarFilled' : 'Star'"
                             size="small"
-                            >{{ comment.is_star ? "取消加精" : "加精" }}</el-button
+                            >{{
+                                comment.is_star
+                                    ? $jx3boxT("jx3boxUi.wikiComment.cancelStar", "取消加精")
+                                    : $jx3boxT("jx3boxUi.wikiComment.setStar", "加精")
+                            }}</el-button
                         >
                         <el-button type="primary" class="u-reply" @click="onTop(comment)" plain icon="Top" size="small">{{
-                            comment.is_top ? "取消置顶" : "置顶"
+                            comment.is_top
+                                ? $jx3boxT("jx3boxUi.wikiComment.cancelTop", "取消置顶")
+                                : $jx3boxT("jx3boxUi.wikiComment.setTop", "置顶")
                         }}</el-button>
                     </template>
                     <!-- 更新时间 -->
                     <span class="u-time" v-text="ts2str(comment.updated)"></span>
                 </div>
                 <!-- 评论回复表单 -->
-                <div class="m-reply-form" v-if="comment.reply_form && comment.reply_form.show">
-                    <textarea class="u-reply-content" v-model="comment.reply_form.content"></textarea>
+                <div
+                    class="m-reply-form"
+                    :id="`wiki-comment-reply-${comment.id}`"
+                    v-if="comment.reply_form && comment.reply_form.show"
+                >
+                    <textarea
+                        class="u-reply-content"
+                        v-model="comment.reply_form.content"
+                        :aria-label="$jx3boxT('jx3boxUi.wiki.reply', '回复')"
+                    ></textarea>
                     <div class="u-author">
-                        <span>昵称：</span>
-                        <input v-model="comment.reply_form.user_nickname" type="text" />
+                        <span>{{ $jx3boxT("jx3boxUi.wiki.nickname", "昵称：") }}</span>
+                        <input
+                            v-model="comment.reply_form.user_nickname"
+                            type="text"
+                            :aria-label="$jx3boxT('jx3boxUi.wiki.nickname', '昵称：')"
+                        />
                     </div>
                     <el-button type="primary" class="u-submit" @click="create_comment(comment.reply_form, comment.id)">
                         <i class="el-icon-check"></i>
-                        <span>提交</span>
+                        <span>{{ $jx3boxT("jx3boxUi.common.submit", "提交") }}</span>
                     </el-button>
                 </div>
             </div>
@@ -117,7 +139,10 @@ export default {
             if (!app.create_comment) app = app.$parent;
             if (!app.create_comment) {
                 this.$message({
-                    message: "发布评论异常，请联系管理员",
+                    message: this.$jx3boxT(
+                        "jx3boxUi.wikiComment.publishUnavailable",
+                        "发布评论异常，请联系管理员"
+                    ),
                     type: "warning",
                 });
                 return;
@@ -132,7 +157,10 @@ export default {
             if (!app.star_comment) app = app.$parent;
             if (!app.star_comment) {
                 this.$message({
-                    message: "操作异常，请联系管理员",
+                    message: this.$jx3boxT(
+                        "jx3boxUi.wikiComment.actionUnavailable",
+                        "操作异常，请联系管理员"
+                    ),
                     type: "warning",
                 });
                 return;
@@ -144,7 +172,10 @@ export default {
             if (!app.top_comment) app = app.$parent;
             if (!app.top_comment) {
                 this.$message({
-                    message: "操作异常，请联系管理员",
+                    message: this.$jx3boxT(
+                        "jx3boxUi.wikiComment.actionUnavailable",
+                        "操作异常，请联系管理员"
+                    ),
                     type: "warning",
                 });
                 return;

package/src/wiki/WikiComments.vue

@@ -1,5 +1,5 @@
 <template>
-    <WikiPanel class="c-wiki-comments" scene="detail">
+    <WikiPanel class="c-wiki-comments" scene="detail" :variant="variant">
         <template #head-title>
             <i class="u-icon el-icon-chat-line-round"></i>
             <span class="u-txt">{{ $jx3boxT('jx3boxUi.wikiComments.title', '百科评论') }}</span>
@@ -29,10 +29,18 @@
                         <i class="el-icon-chat-dot-round"></i>
                         <span>{{ $jx3boxT('jx3boxUi.wiki.reply', '回复') }}</span>
                     </h4>
-                    <textarea class="u-reply-content" v-model="reply_form.content"></textarea>
+                    <textarea
+                        class="u-reply-content"
+                        v-model="reply_form.content"
+                        :aria-label="$jx3boxT('jx3boxUi.wiki.reply', '回复')"
+                    ></textarea>
                     <div class="u-author">
                         <span>{{ $jx3boxT('jx3boxUi.wiki.nickname', '昵称：') }}</span>
-                        <input v-model="reply_form.user_nickname" type="text" />
+                        <input
+                            v-model="reply_form.user_nickname"
+                            type="text"
+                            :aria-label="$jx3boxT('jx3boxUi.wiki.nickname', '昵称：')"
+                        />
                     </div>
                     <el-button type="primary" class="u-submit" @click="create_comment(reply_form)">
                         <i class="el-icon-check"></i>
@@ -61,6 +69,11 @@ export default {
             type: [Number, String],
             default: 0,
         },
+        variant: {
+            type: String,
+            default: "default",
+            validator: (value) => ["default", "surface", "plain"].includes(value),
+        },
     },
     data() {
         return {
@@ -163,7 +176,9 @@ export default {
                 });
         },
         getDefaultNickname() {
-            return User.isLogin() ? User.getInfo().name : "神秘侠士";
+            return User.isLogin()
+                ? User.getInfo().name
+                : this.$jx3boxT("jx3boxUi.wiki.mysterious", "神秘侠士");
         },
         handleCurrentChange(page) {
             this.page = page;

package/src/wiki/WikiPanel.vue

@@ -1,9 +1,7 @@
 <template>
     <div
         class="c-wiki-panel"
-        :class="{
-            border: border,
-        }"
+        :class="rootClasses"
     >
         <div class="m-panel-head">
             <slot name="head-before"></slot>
@@ -11,7 +9,13 @@
                 <slot name="head-title"></slot>
             </div>
             <div class="m-panel-actions">
-                <QRcode v-if="wikiPost && showQR" class="u-qr" />
+                <QRcode
+                    v-if="wikiPost && showQR"
+                    class="u-qr"
+                    :trigger-text="$jx3boxT('jx3boxUi.wikiPanel.qrTrigger', '二维码')"
+                    :popup-text="$jx3boxT('jx3boxUi.wikiPanel.qrScanToVisit', '扫一扫即可访问')"
+                    popup-class="u-wiki-panel-qrcode-popup"
+                />
                 <slot name="head-actions"></slot>
             </div>
             <slot name="head-after"></slot>
@@ -72,6 +76,11 @@ export default {
             type: String,
             default: "default",
         },
+        variant: {
+            type: String,
+            default: "default",
+            validator: (value) => ["default", "surface", "plain"].includes(value),
+        },
         border: {
             type: Boolean,
             default: true,
@@ -86,6 +95,15 @@ export default {
             stat: null,
         };
     },
+    computed: {
+        rootClasses() {
+            return {
+                border: this.border,
+                [`is-${this.variant}`]: true,
+                [`is-scene-${this.scene}`]: true,
+            };
+        },
+    },
     watch: {
         wikiPost: {
             immediate: true,

package/src/wiki/WikiRevisions.vue

@@ -1,5 +1,5 @@
 <template>
-    <WikiPanel class="c-wiki-revisions" scene="detail">
+    <WikiPanel class="c-wiki-revisions" scene="detail" :variant="variant">
         <template #head-title>
             <i class="u-icon el-icon-time"></i>
             <span class="u-txt">{{ $jx3boxT('jx3boxUi.wikiRevisions.title', '历史版本') }}</span>
@@ -62,6 +62,11 @@ export default {
             type: [Boolean, Number],
             default: false,
         },
+        variant: {
+            type: String,
+            default: "default",
+            validator: (value) => ["default", "surface", "plain"].includes(value),
+        },
     },
     data: function () {
         return {

package/tests/wiki-i18n-contract.test.js

@@ -0,0 +1,113 @@
+const assert = require("node:assert/strict");
+const test = require("node:test");
+
+require("@babel/register")({
+    babelrc: false,
+    configFile: false,
+    extensions: [".js"],
+    ignore: [/node_modules/],
+    plugins: ["@babel/plugin-transform-modules-commonjs"],
+});
+
+const {
+    createJx3boxUiI18n,
+    getJx3boxUiMessages,
+    mergeJx3boxUiMessages,
+    setJx3boxUiI18n,
+} = require("../i18n");
+const i18nMixin = require("../i18n/mixin").default;
+const { createI18n } = require("vue-i18n");
+
+const TARGET_PREFIXES = [
+    "wiki.",
+    "wikiPanel.",
+    "wikiComments.",
+    "wikiComment.",
+    "wikiRevisions.",
+    "gamePrice.",
+];
+
+function flattenMessages(value, prefix = "", output = {}) {
+    Object.entries(value || {}).forEach(([key, child]) => {
+        const path = prefix ? `${prefix}.${key}` : key;
+        if (child && typeof child === "object" && !Array.isArray(child)) {
+            flattenMessages(child, path, output);
+        } else {
+            output[path] = child;
+        }
+    });
+    return output;
+}
+
+function placeholders(value) {
+    return [...String(value ?? "").matchAll(/\{(\w+)\}/g)].map((match) => match[1]).sort();
+}
+
+test("loads the target component messages for each supported locale", () => {
+    const messages = getJx3boxUiMessages();
+    Object.entries(messages).forEach(([locale, message]) => {
+        const flattened = flattenMessages(message);
+        TARGET_PREFIXES.forEach((prefix) => {
+            assert.ok(
+                Object.keys(flattened).some((key) => key.startsWith(prefix)),
+                `${locale} is missing ${prefix}`
+            );
+        });
+    });
+
+    const i18n = createJx3boxUiI18n({ locale: "en-US" });
+    assert.equal(i18n.global.t("jx3boxUi.wikiComment.setTop"), "Pin");
+    assert.equal(i18n.global.t("jx3boxUi.wikiPanel.qrTrigger"), "QR code");
+    assert.equal(i18n.global.t("jx3boxUi.wikiPanel.qrScanToVisit"), "Scan to open this page");
+    assert.equal(i18n.global.t("jx3boxUi.gamePrice.jin"), "gold");
+});
+
+test("merges target messages into a host i18n instance", () => {
+    const hostI18n = createI18n({
+        legacy: false,
+        locale: "en-US",
+        fallbackLocale: "zh-CN",
+        messages: {
+            "en-US": {
+                host: {
+                    title: "Host",
+                },
+            },
+        },
+    });
+
+    mergeJx3boxUiMessages(hostI18n);
+    setJx3boxUiI18n(hostI18n);
+
+    assert.equal(hostI18n.global.t("host.title"), "Host");
+    assert.equal(hostI18n.global.t("jx3boxUi.wikiComments.title"), "Wiki Comments");
+});
+
+test("component mixin keeps the explicit fallback when the host misses a key", () => {
+    setJx3boxUiI18n(null);
+    const context = {
+        $t(key) {
+            return key;
+        },
+    };
+
+    assert.equal(
+        i18nMixin.methods.$jx3boxT.call(context, "jx3boxUi.missing.example", "欢迎 {name}", { name: "侠士" }),
+        "欢迎 侠士"
+    );
+});
+
+test("keeps four locale message keys and placeholders aligned", () => {
+    const messages = getJx3boxUiMessages();
+    const locales = Object.keys(messages);
+    const baseline = flattenMessages(messages["zh-CN"]);
+    const baselineKeys = Object.keys(baseline).sort();
+
+    locales.forEach((locale) => {
+        const current = flattenMessages(messages[locale]);
+        assert.deepEqual(Object.keys(current).sort(), baselineKeys, `${locale} message keys differ from zh-CN`);
+        baselineKeys.forEach((key) => {
+            assert.deepEqual(placeholders(current[key]), placeholders(baseline[key]), `${locale}:${key} placeholders differ`);
+        });
+    });
+});