@jx3box/jx3box-ui 2.3.21 → 2.3.23

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