@jx3box/jx3box-ui 2.0.6 → 2.0.7

package/src/App.vue

@@ -75,11 +75,15 @@
                             client="std"
                         ></Homework>
                     </div>
+                    <h1 class="m-title">QRcode</h1>
+                    <div class="m-block">
+                        <QRcode v="cms" />
+                    </div>
                 </el-tab-pane>
                 <el-tab-pane label="文章内容" name="content">
                     <el-radio-group v-model="post_id">
                         <el-radio value="23240">临时测试</el-radio>
-                        <el-radio label="35605">Markdown</el-radio>
+                        <el-radio value="35605">Markdown</el-radio>
                         <el-radio value="32035">仅小册</el-radio>
                         <el-radio value="30017">仅联合创作者</el-radio>
                         <el-radio value="30582">小册和联合创作者</el-radio>
@@ -87,6 +91,29 @@
                     </el-radio-group>
                     <singlebox :post="post" />
                 </el-tab-pane>
+                <el-tab-pane label="百科组件" name="wiki">
+                    <h1 class="m-title">游戏价格组件</h1>
+                    <div class="m-block">
+                        <GamePrice :price="100009999" :align="true"></GamePrice>
+                    </div>
+
+                    <h1 class="m-title">百科面板</h1>
+                    <div class="m-block">
+                        <WikiPanel :wiki-post="wiki_post">
+                            <template #head-title>奇遇攻略</template>
+                        </WikiPanel>
+                    </div>
+
+                    <h1 class="m-title">百科评论</h1>
+                    <div class="m-block">
+                        <WikiComments :source-id="12572" type="achievement" />
+                    </div>
+
+                    <h1 class="m-title">百科修订</h1>
+                    <div class="m-block">
+                        <WikiRevisions type="achievement" :source-id="12572" />
+                    </div>
+                </el-tab-pane>
                 <el-tab-pane label="移动组件" name="mobile">
                     <h1 class="m-title">Common</h1>
                     <el-switch v-model="showSuspendCommon" active-text="展示移动组件"></el-switch>
@@ -134,6 +161,7 @@ import { getPost } from "../service/cms";
 import { get_item } from "../service/item";
 import { getTopicDetails } from "../service/community";
 import post_topics from "@jx3box/jx3box-common/data/post_topics.json";
+import { wiki } from "@jx3box/jx3box-common/js/wiki.js";
 
 // components
 import singlebox from "./single/CmsSingle.vue";
@@ -143,6 +171,12 @@ import PostGuide from "./single/PostGuide.vue";
 import Homework from "./interact/Homework.vue";
 import PostVersion from "./single/PostVersion.vue";
 import PostCollection from "./single/PostCollection.vue";
+import QRcode from "./interact/QRcode.vue";
+
+import GamePrice from "./wiki/GamePrice.vue";
+import WikiComments from "./wiki/WikiComments.vue";
+import WikiRevisions from "./wiki/WikiRevisions.vue";
+import WikiPanel from "./wiki/WikiPanel.vue";
 export default {
     name: "App",
     components: {
@@ -156,6 +190,12 @@ export default {
         PostGuide,
         PostVersion,
         PostCollection,
+        QRcode,
+
+        GamePrice,
+        WikiComments,
+        WikiRevisions,
+        WikiPanel,
     },
     data() {
         return {
@@ -183,6 +223,11 @@ export default {
             showSuspendCommon: false,
 
             community: {},
+
+            wiki_post: {
+                source: {},
+                post: null,
+            },
         };
     },
     watch: {
@@ -264,10 +309,21 @@ export default {
                 this.community = res.data.data;
             });
         },
+        loadWiki() {
+            wiki.mix({ type: "achievement", id: 12572, client: this.client }).then((res) => {
+                const { post, source, compatible, isEmpty, users } = res;
+                this.wiki_post = {
+                    post: post,
+                    source: source,
+                    users,
+                };
+            });
+        },
     },
     mounted() {
         // this.loadItems();
         this.loadCommunity();
+        this.loadWiki();
     },
 };
 </script>

package/src/interact/Homework.vue

@@ -24,8 +24,8 @@
                     <!-- <a class="u-charge" :href="chargeLink" target="_blank">[充值]</a> -->
                 </div>
                 <el-radio-group class="u-homework-type" v-model="type" size="small" v-if="hasPermission">
-                    <el-radio-button label="grant">品鉴</el-radio-button>
-                    <el-radio-button label="reward">打赏</el-radio-button>
+                    <el-radio-button value="grant">品鉴</el-radio-button>
+                    <el-radio-button value="reward">打赏</el-radio-button>
                 </el-radio-group>
                 <div class="u-list">
                     <em class="u-label">❤️ {{ type == "reward" ? "打赏" : "品鉴" }}</em>
@@ -35,7 +35,7 @@
                                 <b>{{ item }}</b
                                 >盒币
                             </el-radio>
-                            <el-radio value="custom"  border>自定义</el-radio>
+                            <el-radio value="custom" border>自定义</el-radio>
                             <el-input
                                 v-model="amount"
                                 v-show="count === 'custom'"
@@ -48,22 +48,21 @@
                     <em class="u-label">📝 寄语</em>
                     <div class="u-input">
                         <el-input
-
                             v-model="remark"
                             placeholder="请输入寄语（必填）"
                             :minlength="2"
                             :maxlength="30"
                             show-word-limit
                         ></el-input>
-                        <el-button  :disabled="fetchingCurrentRelease" @click="insertCurrentRelease"
+                        <el-button :disabled="fetchingCurrentRelease" @click="insertCurrentRelease"
                             >插入当前版本</el-button
                         >
                     </div>
                 </div>
             </div>
             <template #footer>
-                <el-button @click="onClose" >取 消</el-button>
-                <el-button type="primary" @click="submit" :disabled="!ready || submitting" >确 定</el-button>
+                <el-button @click="onClose">取 消</el-button>
+                <el-button type="primary" @click="submit" :disabled="!ready || submitting">确 定</el-button>
             </template>
         </el-dialog>
     </div>
@@ -111,7 +110,7 @@ export default {
         placeholder: {
             type: String,
             default: "",
-        }
+        },
     },
     emits: ["update:modelValue", "updateRecord"],
     data: function () {
@@ -213,7 +212,7 @@ export default {
                 this.loadBoxcoinConfig();
 
                 if (this.hasPermission) {
-                    this.type = 'grant'
+                    this.type = "grant";
                 }
             }
         },
@@ -301,7 +300,7 @@ export default {
             });
         },
         onClose() {
-            this.show = false
+            this.show = false;
         },
     },
     mounted() {

package/src/interact/QRcode.vue

@@ -0,0 +1,104 @@
+<template>
+    <div ref="trigger" class="w-qrcode" @click="togglePic" v-if="mode == 'cms'">
+        <img class="u-icon" svg-inline src="../../assets/img/widget/qr-code.svg" />
+        <span class="u-text">二维码</span>
+    </div>
+    <teleport to="body">
+        <div v-if="mode == 'cms' && active" class="u-qrcode u-qrcode-popup" :style="popupStyle" @click.stop>
+            <qrcode-vue class="u-pic" :value="value" :size="size" level="H"></qrcode-vue>
+            <span>扫一扫即可访问</span>
+        </div>
+    </teleport>
+    <div class="w-qrcode-static" v-if="mode == 'static'">
+        <div class="u-qrcode">
+            <qrcode-vue class="u-pic" :value="value" :size="size" level="H"></qrcode-vue>
+            <span class="u-txt"
+                ><img class="u-icon" svg-inline src="../../assets/img/widget/qr-code.svg" />扫一扫手机访问</span
+            >
+        </div>
+    </div>
+</template>
+
+<script>
+import { nextTick } from "vue";
+import QrcodeVue from "qrcode.vue";
+export default {
+    name: "QRcode",
+    props: {
+        href: {
+            type: String,
+            default: "",
+        },
+        v: {
+            type: String,
+            default: "cms",
+        },
+        s: {
+            type: Number,
+            default: 100,
+        },
+    },
+    data: function () {
+        return {
+            value: this.href || location.href,
+            size: this.s || 100,
+            active: false,
+            mode: this.v || "cms",
+            popupStyle: {
+                top: "0px",
+                left: "0px",
+            },
+            docClickHandler: null,
+            repositionHandler: null,
+        };
+    },
+    computed: {},
+    methods: {
+        togglePic: function (e) {
+            e.stopPropagation();
+            this.active = !this.active;
+            if (this.active) {
+                nextTick(() => {
+                    this.updatePopupPosition();
+                });
+            }
+        },
+        updatePopupPosition: function () {
+            const trigger = this.$refs.trigger;
+            if (!trigger) return;
+
+            const rect = trigger.getBoundingClientRect();
+            this.popupStyle = {
+                top: `${rect.bottom + 5}px`,
+                left: `${rect.left + rect.width / 2}px`,
+            };
+        },
+    },
+    mounted: function () {
+        this.docClickHandler = () => {
+            this.active = false;
+        };
+        this.repositionHandler = () => {
+            if (this.active) {
+                this.updatePopupPosition();
+            }
+        };
+
+        document.addEventListener("click", this.docClickHandler);
+        window.addEventListener("resize", this.repositionHandler);
+        window.addEventListener("scroll", this.repositionHandler, true);
+    },
+    beforeUnmount: function () {
+        document.removeEventListener("click", this.docClickHandler);
+        window.removeEventListener("resize", this.repositionHandler);
+        window.removeEventListener("scroll", this.repositionHandler, true);
+    },
+    components: {
+        QrcodeVue,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/interact/qrcode.less";
+</style>

package/src/single/VersionDialog.vue

@@ -10,7 +10,7 @@
         <div class="m-version-container" v-loading="loading">
             <div class="m-toolbar">
                 <el-radio-group v-model="type">
-                    <el-radio-button :label="item.value" v-for="item in types" :key="item.value">{{
+                    <el-radio-button :value="item.value" v-for="item in types" :key="item.value">{{
                         item.label
                     }}</el-radio-button>
                 </el-radio-group>
@@ -159,7 +159,7 @@ export default {
         },
         visible(val) {
             this.$emit("update:modelValue", val);
-        }
+        },
     },
     methods: {
         close() {

package/src/stories/interact/QRcode.stories.js

@@ -0,0 +1,59 @@
+import QRcode from '../../interact/QRcode.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Interact/QRcode',
+    component: QRcode,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        href: { control: 'text' },
+        v: { control: 'radio', options: ['cms', 'static'] },
+        s: { control: { type: 'number', min: 80, max: 240, step: 10 } },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        href: 'https://www.jx3box.com',
+        v: 'cms',
+        s: 120,
+    },
+    render: (args) => ({
+        components: { QRcode, StoryPropsTable },
+        setup() {
+            return {
+                args,
+                propsInfo: [
+                    { name: 'href', type: 'String', default: 'location.href', description: '二维码指向地址。' },
+                    { name: 'v', type: 'String', default: '"cms"', description: '展示模式，支持弹出态和静态态。' },
+                    { name: 's', type: 'Number', default: '100', description: '二维码尺寸。' },
+                ],
+            };
+        },
+        template: `
+            <div style="display:grid;gap:24px;padding:32px;background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);min-height:100vh;">
+                <section style="display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border-radius:20px;background:rgba(255,255,255,0.92);box-shadow:0 24px 60px rgba(15,23,42,0.08);">
+                    <div>
+                        <h2 style="margin:0;font-size:28px;color:#0f172a;">QRcode</h2>
+                        <p style="margin:12px 0 0;color:#475569;line-height:1.8;">用于文章和百科详情页中的扫码访问入口。</p>
+                    </div>
+                    <QRcode v-bind="args" />
+                </section>
+                <StoryPropsTable title="QRcode" description="二维码组件参数说明。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};
+
+export const StaticCard = {
+    args: {
+        href: 'https://www.jx3box.com/wiki/achievement/1001',
+        v: 'static',
+        s: 140,
+    },
+    render: Default.render,
+};

package/src/stories/mockData.js

@@ -273,3 +273,97 @@ export const mockCommitHistories = [
         `,
     },
 ];
+
+export const mockWikiPost = {
+    type: 'achievement',
+    source_id: 1001,
+    post: {
+        title: '25 人普通西津渡首领机制',
+        level: 4,
+        updated: '2026-03-11T20:30:00+08:00',
+    },
+    users: [
+        {
+            id: 8,
+            nickname: '薄嘴唇靓仔',
+            avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+        },
+        {
+            id: 17,
+            nickname: '藏剑校对君',
+            avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
+        },
+    ],
+};
+
+export const mockWikiStat = {
+    views: 32145,
+};
+
+export const mockWikiComments = {
+    list: [
+        {
+            id: 1,
+            parent_id: 0,
+            user_id: 8,
+            user_nickname: '薄嘴唇靓仔',
+            content: '<p>这条评论用于展示百科评论区的主楼样式、置顶和加精状态。</p>',
+            updated: '2026-03-11 20:40:00',
+            is_top: 1,
+            is_star: 1,
+            children: [
+                {
+                    id: 2,
+                    parent_id: 1,
+                    user_id: 17,
+                    user_nickname: '藏剑校对君',
+                    content: '<p>回复楼层会通过递归组件继续渲染，方便在 Storybook 里检查层级样式。</p>',
+                    updated: '2026-03-11 20:55:00',
+                    is_top: 0,
+                    is_star: 0,
+                    children: [],
+                },
+            ],
+        },
+        {
+            id: 3,
+            parent_id: 0,
+            user_id: 26,
+            user_nickname: '副本小助手',
+            content: '<p>第二条评论保留普通状态，用来对比按钮和时间信息。</p>',
+            updated: '2026-03-11 21:10:00',
+            is_top: 0,
+            is_star: 0,
+            children: [],
+        },
+    ],
+    page: 1,
+    total: 2,
+};
+
+export const mockWikiRevisions = [
+    {
+        id: 201,
+        source_id: 1001,
+        updated: '2026-03-11 21:00:00',
+        user_id: 8,
+        user_nickname: '薄嘴唇靓仔',
+        remark: '补充首领技能预警时序。',
+    },
+    {
+        id: 202,
+        source_id: 1001,
+        updated: '2026-03-10 19:20:00',
+        user_id: 17,
+        user_nickname: '藏剑校对君',
+        remark: '修正文案并补充图片说明。',
+    },
+    {
+        id: 203,
+        source_id: 1001,
+        updated: '2026-03-09 16:45:00',
+        user_id: 26,
+        user_nickname: '副本小助手',
+        remark: '创建初版机制条目。',
+    },
+];

package/src/stories/wiki/GamePrice.stories.js

@@ -0,0 +1,64 @@
+import GamePrice from '../../wiki/GamePrice.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Wiki/GamePrice',
+    component: GamePrice,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        price: { control: 'text' },
+        align: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        price: 123456789,
+        align: false,
+    },
+    render: (args) => ({
+        components: { GamePrice, StoryPropsTable },
+        setup() {
+            return {
+                args,
+                examples: [0, 520, 12888, 123456789, -20800],
+                propsInfo: [
+                    { name: 'price', type: 'Number | String', default: '0', description: '以铜为最小单位的游戏货币值。' },
+                    { name: 'align', type: 'Boolean', default: 'false', description: '开启后按金额单位宽度对齐。' },
+                ],
+            };
+        },
+        template: `
+            <div style="display:grid;gap:24px;padding:32px;background:linear-gradient(180deg,#f8fafc 0%,#eef2f7 100%);min-height:100vh;">
+                <section style="display:grid;gap:20px;padding:24px;border-radius:20px;background:rgba(255,255,255,0.92);box-shadow:0 24px 60px rgba(15,23,42,0.08);">
+                    <div>
+                        <h2 style="margin:0;font-size:28px;color:#0f172a;">GamePrice</h2>
+                        <p style="margin:12px 0 0;color:#475569;line-height:1.8;">将整型金额拆解为砖金银铜并附带图标展示。</p>
+                    </div>
+                    <div style="font-size:28px;color:#0f172a;">
+                        <GamePrice v-bind="args" />
+                    </div>
+                    <div style="display:grid;gap:12px;">
+                        <div v-for="item in examples" :key="item" style="display:flex;align-items:center;justify-content:space-between;gap:24px;padding:14px 18px;border-radius:14px;background:#f8fafc;">
+                            <code style="color:#475569;">{{ item }}</code>
+                            <GamePrice :price="item" :align="args.align" />
+                        </div>
+                    </div>
+                </section>
+                <StoryPropsTable title="GamePrice" description="游戏金额展示组件入参。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};
+
+export const Aligned = {
+    args: {
+        price: 123456789,
+        align: true,
+    },
+    render: Default.render,
+};

package/src/stories/wiki/WikiComments.stories.js

@@ -0,0 +1,58 @@
+import WikiComments from '../../wiki/WikiComments.vue';
+import StorybookShell from '../layout/StorybookShell.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+function seedEditorSession() {
+    try {
+        localStorage.setItem('created_at', String(Date.now()));
+        localStorage.setItem('logged_in', 'true');
+        localStorage.setItem('group', '64');
+        localStorage.setItem('name', 'Storybook编辑者');
+        localStorage.setItem('uid', '8');
+        localStorage.setItem('avatar', 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png');
+    } catch (e) {
+        // ignore storage failures in restricted contexts
+    }
+}
+
+const meta = {
+    title: 'Wiki/WikiComments',
+    component: WikiComments,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        type: { control: 'text' },
+        sourceId: { control: 'number' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        type: 'achievement',
+        sourceId: 1001,
+    },
+    render: (args) => ({
+        components: { WikiComments, StorybookShell, StoryPropsTable },
+        setup() {
+            seedEditorSession();
+            return {
+                args,
+                propsInfo: [
+                    { name: 'type', type: 'String', default: '""', description: '百科条目类型。' },
+                    { name: 'sourceId', type: 'Number | String', default: '0', description: '百科条目源 ID。' },
+                ],
+            };
+        },
+        template: `
+            <StorybookShell placement="main" :show-right-sidebar="false">
+                <div style="display:grid;gap:24px;">
+                    <WikiComments v-bind="args" />
+                    <StoryPropsTable title="WikiComments" description="百科评论区，已接入 Storybook mock 数据。" :items="propsInfo" />
+                </div>
+            </StorybookShell>
+        `,
+    }),
+};

package/src/stories/wiki/WikiPanel.stories.js

@@ -0,0 +1,69 @@
+import WikiPanel from '../../wiki/WikiPanel.vue';
+import { mockWikiPost } from '../mockData';
+import StorybookShell from '../layout/StorybookShell.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Wiki/WikiPanel',
+    component: WikiPanel,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { WikiPanel, StorybookShell, StoryPropsTable },
+        setup() {
+            return {
+                mockWikiPost,
+                propsInfo: [
+                    { name: 'wikiPost', type: 'Object', default: 'null', description: '百科详情数据，包含 post/users/source_id/type。' },
+                    { name: 'scene', type: 'String', default: '"default"', description: '面板所处场景，详情页使用 detail。' },
+                    { name: 'borderNone', type: 'Boolean', default: 'false', description: '控制外层是否显示边框。' },
+                    { name: 'showQR', type: 'Boolean', default: 'true', description: '在详情场景中展示二维码入口。' },
+                ],
+            };
+        },
+        template: `
+            <StorybookShell placement="main" :show-right-sidebar="false">
+                <div style="display:grid;gap:24px;">
+                    <WikiPanel :wiki-post="mockWikiPost" scene="detail">
+                        <template #head-title>
+                            <span>百科条目概览</span>
+                        </template>
+                        <template #head-actions>
+                            <el-tag type="success">已发布</el-tag>
+                        </template>
+                        <template #body>
+                            <div style="padding:4px 0 0;line-height:1.9;color:#475569;">
+                                这里模拟百科详情页中的信息面板，可同时查看贡献者、热度、更新时间与二维码入口。
+                            </div>
+                        </template>
+                    </WikiPanel>
+                    <StoryPropsTable title="WikiPanel" description="百科信息面板基础容器。" :items="propsInfo" />
+                </div>
+            </StorybookShell>
+        `,
+    }),
+};
+
+export const PlainPanel = {
+    render: () => ({
+        components: { WikiPanel, StorybookShell },
+        template: `
+            <StorybookShell placement="main" :show-left-sidebar="false" :show-right-sidebar="false">
+                <WikiPanel :border-none="true" :show-qr="false">
+                    <template #head-title>
+                        <span>普通面板</span>
+                    </template>
+                    <template #body>
+                        <div style="line-height:1.9;color:#475569;">不传 \`wikiPost\` 时可作为通用分区容器使用。</div>
+                    </template>
+                </WikiPanel>
+            </StorybookShell>
+        `,
+    }),
+};