@jx3box/jx3box-ui 2.0.5 → 2.0.7

package/src/stories/single/Thx.stories.js

@@ -0,0 +1,38 @@
+import Thx from '../../single/Thx.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Single/Thx',
+    component: Thx,
+    parameters: {
+        layout: 'fullscreen',
+    },
+};
+
+export default meta;
+
+export const Default = {
+    render: () => ({
+        components: { Thx, StoryPropsTable },
+        setup() {
+            return {
+                propsInfo: [
+                    { name: 'postId', type: 'Number | String', default: '0', required: true, description: '文章 ID。' },
+                    { name: 'postType', type: 'String', default: '""', required: true, description: '文章类型。' },
+                    { name: 'postTitle', type: 'String', default: '""', description: '文章标题。' },
+                    { name: 'userId', type: 'Number | String', default: '0', description: '作者 UID。' },
+                    { name: 'showRss', type: 'Boolean', default: 'false', description: '是否显示订阅按钮。' },
+                    { name: 'adminBoxcoinEnable / userBoxcoinEnable', type: 'Boolean', default: 'false', description: '控制打赏模块显示。' },
+                ],
+            };
+        },
+        template: `
+            <div style="display:grid;gap:24px;">
+                <section style="border-radius:20px;background:rgba(255,255,255,0.92);padding:24px;box-shadow:0 24px 60px rgba(15,23,42,0.08);">
+                    <Thx post-type="bbs" post-title="轻剑驭风版本攻略示例" :post-id="80449" :user-id="8" :admin-boxcoin-enable="true" :user-boxcoin-enable="true" :allow-gift="true" :show-rss="true" author-id="8" category="post" />
+                </section>
+                <StoryPropsTable title="Thx" description="完整互动条组件。" :items="propsInfo" />
+            </div>
+        `,
+    }),
+};

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

package/src/stories/wiki/WikiRevisions.stories.js

@@ -0,0 +1,47 @@
+import WikiRevisions from '../../wiki/WikiRevisions.vue';
+import StorybookShell from '../layout/StorybookShell.vue';
+import StoryPropsTable from '../components/StoryPropsTable.vue';
+
+const meta = {
+    title: 'Wiki/WikiRevisions',
+    component: WikiRevisions,
+    parameters: {
+        layout: 'fullscreen',
+    },
+    argTypes: {
+        type: { control: 'text' },
+        sourceId: { control: 'number' },
+        isGame: { control: 'boolean' },
+    },
+};
+
+export default meta;
+
+export const Default = {
+    args: {
+        type: 'achievement',
+        sourceId: 1001,
+        isGame: false,
+    },
+    render: (args) => ({
+        components: { WikiRevisions, StorybookShell, StoryPropsTable },
+        setup() {
+            return {
+                args,
+                propsInfo: [
+                    { name: 'type', type: 'String', default: '""', description: '百科条目类型。' },
+                    { name: 'sourceId', type: 'Number | String', default: '""', description: '百科条目源 ID。' },
+                    { name: 'isGame', type: 'Boolean | Number', default: 'false', description: '是否按游戏内链接前缀生成跳转地址。' },
+                ],
+            };
+        },
+        template: `
+            <StorybookShell placement="main" :show-right-sidebar="false">
+                <div style="display:grid;gap:24px;">
+                    <WikiRevisions v-bind="args" />
+                    <StoryPropsTable title="WikiRevisions" description="百科历史版本列表。" :items="propsInfo" />
+                </div>
+            </StorybookShell>
+        `,
+    }),
+};

package/src/wiki/GamePrice.vue

@@ -0,0 +1,107 @@
+<template>
+    <span class="c-game-price" :class="{ 'is-align': align }">
+        <span class="u-neg" v-if="numericPrice < 0">- </span>
+        <span v-for="part in priceParts" :key="part.unit" :class="`u-${part.unit}`">
+            <span class="u-value">{{ part.value }}</span>
+            <img :src="part.icon" :alt="part.alt" />
+        </span>
+    </span>
+</template>
+
+<script>
+import zhuanIcon from "../../assets/img/price/zhuan.png";
+import jinIcon from "../../assets/img/price/jin.png";
+import yinIcon from "../../assets/img/price/yin.png";
+import tongIcon from "../../assets/img/price/tong.png";
+
+const PRICE_UNITS = [
+    { unit: "zhuan", base: 100000000, icon: zhuanIcon, alt: "砖" },
+    { unit: "jin", base: 10000, icon: jinIcon, alt: "金" },
+    { unit: "yin", base: 100, icon: yinIcon, alt: "银" },
+    { unit: "tong", base: 1, icon: tongIcon, alt: "铜" },
+];
+
+export default {
+    name: "GamePrice",
+    props: {
+        price: {
+            type: [Number, String],
+            default: 0,
+        },
+        align: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        numericPrice() {
+            const value = Number(this.price);
+            return Number.isFinite(value) ? Math.trunc(value) : 0;
+        },
+        priceParts() {
+            const value = Math.abs(this.numericPrice);
+            let remainder = value;
+
+            const parts = PRICE_UNITS.map((item) => {
+                const amount = Math.floor(remainder / item.base);
+                remainder %= item.base;
+                return {
+                    ...item,
+                    value: amount,
+                };
+            });
+
+            const visibleParts = parts.filter((item) => item.value > 0);
+
+            if (!visibleParts.length) {
+                const tong = parts.find((item) => item.unit === "tong");
+                return tong ? [{ ...tong, value: 0 }] : [];
+            }
+
+            return visibleParts;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-game-price {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+
+    .u-neg,
+    .u-zhuan,
+    .u-jin,
+    .u-yin,
+    .u-tong {
+        display: inline-flex;
+        align-items: center;
+        flex-shrink: 0;
+    }
+
+    img {
+        display: inline-block;
+        .y;
+    }
+
+    &.is-align {
+        .u-jin {
+            .u-value {
+                display: inline-block;
+                width: 4ch;
+                text-align: right;
+            }
+        }
+        .u-yin,
+        .u-tong {
+            .u-value {
+                display: inline-block;
+                width: 2ch;
+                text-align: right;
+            }
+        }
+    }
+}
+</style>

package/src/wiki/WikiComment.vue

@@ -0,0 +1,153 @@
+<template>
+    <ul class="u-comments">
+        <li class="u-comment-panel" v-for="(comment, key) in comments" :key="key">
+            <div class="u-comment">
+                <!-- 评论内容 -->
+                <div class="u-nickname-panel">
+                    <a
+                        class="u-nickname"
+                        :href="comment.user_id ? author_url(comment.user_id) : null"
+                        target="_blank"
+                        v-text="comment.user_nickname"
+                    ></a>
+                    <template v-if="comment.parent_id">
+                        <span>&nbsp;回复&nbsp;</span>
+                        <a
+                            class="u-nickname"
+                            :href="comment.parent.user_id ? author_url(comment.parent.user_id) : null"
+                            target="_blank"
+                            v-text="comment.parent.user_nickname"
+                        ></a>
+                    </template>
+                    <span class="u-mark u-top" v-if="comment.is_top">
+                        <i class="el-icon-download"></i>
+                        置顶
+                    </span>
+                    <span class="u-mark u-star" v-if="comment.is_star">
+                        <i class="el-icon-star-on"></i>
+                        精华
+                    </span>
+                </div>
+                <p class="u-content" v-html="comment.content"></p>
+                <!-- 其他 -->
+                <div class="m-reply">
+                    <!-- 展开、收起 -->
+                    <el-button
+                        type="default"
+                        v-if="comment.reply_form && comment.reply_form.show"
+                        class="u-reply"
+                        @click="comment.reply_form.show = !comment.reply_form.show"
+                    >
+                        <i class="el-icon-arrow-up"></i>
+                        <span>收起</span>
+                    </el-button>
+                    <el-button
+                        type="primary"
+                        plain
+                        v-else
+                        class="u-reply"
+                        @click="comment.reply_form.show = !comment.reply_form.show"
+                        icon="ChatDotRound"
+                    >
+                        <span>回复</span>
+                    </el-button>
+                    <template v-if="isEditor && !comment.parent_id">
+                        <el-button
+                            type="primary"
+                            class="u-reply"
+                            @click="onStar(comment)"
+                            plain
+                            :icon="comment.is_star ? 'StarFilled' : 'Star'"
+                            >{{ comment.is_star ? "取消加精" : "加精" }}</el-button
+                        >
+                        <el-button type="primary" class="u-reply" @click="onTop(comment)" plain icon="Top">{{
+                            comment.is_top ? "取消置顶" : "置顶"
+                        }}</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="u-author">
+                        <span>昵称：</span>
+                        <input v-model="comment.reply_form.user_nickname" type="text" />
+                    </div>
+                    <el-button type="primary" class="u-submit" @click="create_comment(comment.reply_form, comment.id)">
+                        <i class="el-icon-check"></i>
+                        <span>提交</span>
+                    </el-button>
+                </div>
+            </div>
+            <WikiComment v-if="comment.children.length" :comments="comment.children" :source-id="sourceId" />
+        </li>
+    </ul>
+</template>
+
+<script>
+import { authorLink, ts2str } from "@jx3box/jx3box-common/js/utils";
+import User from "@jx3box/jx3box-common/js/user";
+
+export default {
+    name: "WikiComment",
+    props: {
+        comments: {
+            type: Array,
+            default: () => [],
+        },
+        sourceId: {
+            type: [Number, String],
+            default: 0,
+        },
+    },
+    computed: {
+        isEditor() {
+            return User.isEditor();
+        },
+    },
+    methods: {
+        author_url: authorLink,
+        ts2str,
+        create_comment(form, parent_id) {
+            let app = this.$parent;
+            if (!app.create_comment) app = app.$parent;
+            if (!app.create_comment) {
+                this.$message({
+                    message: "发布评论异常，请联系管理员",
+                    type: "warning",
+                });
+                return;
+            }
+            app.create_comment(form, parent_id);
+        },
+        isParent(comment) {
+            return !comment.parent_id;
+        },
+        onStar(comment) {
+            let app = this.$parent;
+            if (!app.star_comment) app = app.$parent;
+            if (!app.star_comment) {
+                this.$message({
+                    message: "操作异常，请联系管理员",
+                    type: "warning",
+                });
+                return;
+            }
+            app.star_comment(comment, comment.is_star ? 0 : 1);
+        },
+        onTop(comment) {
+            let app = this.$parent;
+            if (!app.top_comment) app = app.$parent;
+            if (!app.top_comment) {
+                this.$message({
+                    message: "操作异常，请联系管理员",
+                    type: "warning",
+                });
+                return;
+            }
+            app.top_comment(comment, comment.is_top ? 0 : 1);
+        },
+    },
+};
+</script>