@jx3box/jx3box-ui 2.3.20 → 2.3.22

package/src/header/client.vue

@@ -305,15 +305,15 @@ export default {
     .u-game__icon {
         .flex(x);
         flex: 0 0 auto;
-        width: 16px;
-        height: 16px;
+        width: 20px;
+        height: 20px;
         margin-right: 12px;
 
         &,
         svg,
         img {
-            width: 16px !important;
-            height: 16px !important;
+            width: 20px !important;
+            height: 20px !important;
         }
 
         svg,

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`);
+        });
+    });
+});