@jx3box/jx3box-ui 2.2.10 → 2.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@jx3box/jx3box-ui",
-    "version": "2.2.10",
+    "version": "2.2.12",
     "description": "JX3BOX Vue3 UI",
     "main": "index.js",
     "scripts": {

package/service/suspend.js

@@ -50,9 +50,10 @@ function later(data) {
     return $next().post(`/api/next2/userdata/watch-later/item`, data);
 }
 // 收藏相关
-function setCollect(id, type, post_title) {
+function setCollect(id, type, post_title, author_id) {
     return $next().post(`/api/article/favorites/add/${id}/${type}`, {
         post_title: post_title,
+        author_id,
     });
 }
 function getCollectList(id, type) {

package/src/CommonFooter.vue

@@ -33,7 +33,7 @@ import FooterResource from "./footer/resource.vue";
 import FooterCopyright from "./footer/copyright.vue";
 import i18nMixin from "../i18n/mixin";
 export default {
-    name: "Footer",
+    name: "CommonFooter",
     mixins: [i18nMixin],
     components: {
         FooterOfficial,
@@ -53,7 +53,7 @@ body::after {
     bottom: 0;
     background: #111827;
 }
-.c-footer--v4{
+.c-footer--v4 {
     box-sizing: border-box;
     padding: 3rem 1.5rem;
     background: #111827;
@@ -113,7 +113,7 @@ body::after {
         font-size: 1.5rem;
         line-height: 2rem;
         font-weight: 700;
-        letter-spacing: -0.025em;
+        letter-spacing: 0;
         color: #fff;
     }
 
@@ -125,8 +125,8 @@ body::after {
         color: #9ca3af;
     }
 
-    .u-logo{
-        fill:#fff;
+    .u-logo {
+        fill: #fff;
     }
 }
 .c-footer--v4__popover {

package/src/SuspendCommon.vue

@@ -466,6 +466,7 @@ export default {
                     avatar: "", //作者头像
                     author_id: "", //作者id
                 },
+                author_id: "",
                 subscribeType: "", //订阅类型，用于区分调用百科、文章、作者、帖子等订阅接口，
                 postType: "", //订阅、收藏接口的type,如'face','bps','article'等
                 id: "", //页面数据ID，用于收藏订阅操作
@@ -500,6 +501,15 @@ export default {
         fixIsActive() {
             return this.fixList.some((item) => item.url === this.fixPageConfig.url);
         },
+        authorId() {
+            return this.drawerConfig.author_id || this.drawerConfig.author?.author_id || "";
+        },
+        subscribeData() {
+            return {
+                title: this.drawerConfig.title,
+                author_id: this.authorId,
+            };
+        },
     },
     mounted() {
         this.fixList = JSON.parse(localStorage.getItem(this.fixPageConfig.key)) || [];
@@ -590,7 +600,7 @@ export default {
                     this.collectInfo = {};
                 });
             } else {
-                setCollect(conf.id, conf.postType, conf.title).then((res) => {
+                setCollect(conf.id, conf.postType, conf.title, this.authorId).then((res) => {
                     this.isCollect = true;
                     this.collectInfo = res.data?.data;
                 });
@@ -629,7 +639,7 @@ export default {
                         this.$emit("subscribe", { isSubscribe: false });
                     });
                 } else {
-                    subscribePost(conf.id, { title: conf.title }).then((res) => {
+                    subscribePost(conf.id, this.subscribeData).then((res) => {
                         this.isSubscribe = true;
                         this.subscribeInfo = res.data?.data;
                         this.$emit("subscribe", { isSubscribe: true });
@@ -644,7 +654,7 @@ export default {
                         this.$emit("subscribe", { isSubscribe: false });
                     });
                 } else {
-                    subscribeArticle(conf.postType, conf.id, { title: conf.title }).then((res) => {
+                    subscribeArticle(conf.postType, conf.id, this.subscribeData).then((res) => {
                         this.isSubscribe = true;
                         this.subscribeInfo = res.data?.data;
                         this.$emit("subscribe", { isSubscribe: true });
@@ -659,7 +669,7 @@ export default {
                         this.$emit("subscribe", { isSubscribe: false });
                     });
                 } else {
-                    subscribeWiki(conf.postType, conf.id, { title: conf.title }).then((res) => {
+                    subscribeWiki(conf.postType, conf.id, this.subscribeData).then((res) => {
                         this.isSubscribe = true;
                         this.subscribeInfo = res.data?.data;
                         this.$emit("subscribe", { isSubscribe: true });

package/src/footer/resource.vue

@@ -4,7 +4,7 @@
             {{ $jx3boxT("jx3boxUi.commonFooter.downloadCenter", "下载中心") }}
         </h3>
         <div class="c-footer-resource__grid">
-            <div v-for="item in downloadLinks" :key="item.name">
+            <div v-for="item in downloadLinks" :key="item.key">
                 <el-popover v-if="item.qrcode" trigger="hover" placement="top" popper-class="c-footer--v4__popover">
                     <div class="c-footer-resource__qrcode">
                         <img
@@ -15,58 +15,26 @@
                         <span class="c-footer-resource__qrcode-label">{{ getDownloadLabel(item) }}</span>
                     </div>
                     <template #reference>
-                        <a
-                            class="c-footer-resource__download"
-                            :href="item.href || '#'"
-                            :target="item.href ? '_blank' : null"
-                            :rel="item.href ? 'noopener noreferrer' : null"
-                            @click="handleLinkClick($event, item)"
-                        >
+                        <button class="c-footer-resource__download" type="button">
                             <span class="c-footer-resource__download-icon">
-                                <img :src="item.icon" :alt="getDownloadName(item)" />
+                                <img :src="item.icon" alt="" aria-hidden="true" />
                             </span>
                             <span>{{ getDownloadName(item) }}</span>
-                        </a>
+                        </button>
                     </template>
                 </el-popover>
-                <el-popover
-                    v-else-if="item.placeholder"
-                    trigger="hover"
-                    placement="top"
-                    :show-after="150"
-                    popper-class="c-footer--v4__popover"
-                >
-                    <div class="c-footer-resource__placeholder">
-                        {{ item.placeholder }}
-                    </div>
-                    <template #reference>
-                        <a
-                            class="c-footer-resource__download"
-                            :href="item.href || '#'"
-                            :target="item.href ? '_blank' : null"
-                            :rel="item.href ? 'noopener noreferrer' : null"
-                            @click="handleLinkClick($event, item)"
-                        >
-                            <span class="c-footer-resource__download-icon">
-                                <img :src="item.icon" :alt="getDownloadName(item)" />
-                            </span>
-                            <span>{{ getDownloadName(item) }}</span>
-                        </a>
-                    </template>
-                </el-popover>
-                <a
+                <button
                     v-else
                     class="c-footer-resource__download"
-                    :href="item.href || '#'"
-                    :target="item.href ? '_blank' : null"
-                    :rel="item.href ? 'noopener noreferrer' : null"
-                    @click="handleLinkClick($event, item)"
+                    :class="{ 'is-active': activePlatform === item.key && downloadDialogVisible }"
+                    type="button"
+                    @click="openDownloadDialog(item)"
                 >
                     <span class="c-footer-resource__download-icon">
-                        <img :src="item.icon" :alt="getDownloadName(item)" />
+                        <img :src="item.icon" alt="" aria-hidden="true" />
                     </span>
                     <span>{{ getDownloadName(item) }}</span>
-                </a>
+                </button>
             </div>
         </div>
 
@@ -98,75 +66,286 @@
                 {{ $jx3boxT("jx3boxUi.commonFooter.add", "添加") }}
             </a>
         </div>
+
+        <el-dialog
+            v-model="downloadDialogVisible"
+            :title="activeDialogTitle"
+            width="960px"
+            class="m-footer-app-dialog"
+        >
+            <div
+                v-loading="appConfigLoading"
+                class="m-footer-app-download"
+            >
+                <div class="u-app-header">
+                    <img class="u-app-icon" :src="appLogo" :alt="appName" @error="handleLogoError" />
+                    <div class="u-app-meta">
+                        <div class="u-app-name">{{ appName }}</div>
+                        <div class="u-app-version">{{ appVersion }}</div>
+                        <div
+                            v-if="appDescription"
+                            class="u-app-desc-box"
+                            :class="{
+                                'is-expanded': appDescExpanded,
+                                'is-foldable': hasDescFold(appDescription),
+                            }"
+                            @click="toggleAppDesc"
+                        >
+                            <el-icon v-if="hasDescFold(appDescription)" class="u-desc-toggle">
+                                <ArrowUp v-if="appDescExpanded" />
+                                <ArrowDown v-else />
+                            </el-icon>
+                            <div class="u-app-desc">
+                                {{ getFoldedDesc(appDescription, appDescExpanded) }}
+                            </div>
+                        </div>
+                    </div>
+                    <div class="u-app-download-action">
+                        <el-button
+                            class="u-app-store-button"
+                            type="primary"
+                            :disabled="!activeDownloadUrl"
+                            @click="openActiveDownload"
+                        >
+                            <el-icon class="u-button-icon"><Download /></el-icon>
+                            <span>{{ activeDownloadText }}</span>
+                        </el-button>
+                        <div v-if="activePlatform === 'android'" class="u-app-download-tip">
+                            仅支持 Android 10 及以上系统
+                        </div>
+                    </div>
+                </div>
+
+                <div class="u-app-preview">
+                    <div class="u-app-preview-tabs">
+                        <button
+                            v-for="device in previewDevices"
+                            :key="device.key"
+                            type="button"
+                            class="u-preview-tab"
+                            :class="{ 'is-active': activePreviewDevice === device.key }"
+                            @click="activePreviewDevice = device.key"
+                        >
+                            {{ device.label }}
+                        </button>
+                    </div>
+
+                    <div class="u-app-preview-list" :class="`is-${activePreviewDevice}`">
+                        <div v-for="image in currentPreviewImages" :key="image" class="u-app-preview-card">
+                            <el-image
+                                class="u-app-preview-image"
+                                :src="image"
+                                :preview-src-list="currentPreviewImages"
+                                :initial-index="currentPreviewImages.indexOf(image)"
+                                fit="cover"
+                                preview-teleported
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </el-dialog>
     </section>
 </template>
 
 <script>
+import { ArrowDown, ArrowUp, Download } from "@element-plus/icons-vue";
 import { copyText } from "../../utils";
 import i18nMixin from "../../i18n/mixin";
+import { getConfig } from "../../service/cms";
+
+const APP_LOGO_FALLBACK = "https://cdn.jx3box.com/design/app/logo/jx3box-icon-512.png";
+const APPLE_STORE_LINK = "https://apps.apple.com/cn/app/id6761459300";
+const HARMONY_STORE_LINK = "https://appgallery.huawei.com/app/xxx";
+const APP_CONFIG_KEYS = ["android_apk", "android_versions", "app_logo", "app_version_desc"];
+
 export default {
     name: "FooterResource",
     mixins: [i18nMixin],
     props: [],
-    components: {},
+    components: { ArrowDown, ArrowUp, Download },
     data: function () {
         return {
+            downloadDialogVisible: false,
+            activePlatform: "appStore",
+            activePreviewDevice: "phone",
+            appDescExpanded: false,
+            appConfig: {},
+            appConfigLoading: false,
+            appConfigLoaded: false,
+            previewDevices: [
+                { key: "phone", label: "Phone" },
+                { key: "pad", label: "Pad" },
+            ],
+            previewImages: {
+                phone: [
+                    "https://cdn.jx3box.com/design/app/phone/phone1.jpg",
+                    "https://cdn.jx3box.com/design/app/phone/phone2.jpg",
+                    "https://cdn.jx3box.com/design/app/phone/phone3.jpg",
+                ],
+                pad: [
+                    "https://cdn.jx3box.com/design/app/pad/pad1.jpg",
+                    "https://cdn.jx3box.com/design/app/pad/pad2.jpg",
+                    "https://cdn.jx3box.com/design/app/pad/pad3.jpg",
+                ],
+            },
             downloadLinks: [
                 {
                     key: "appStore",
                     name: "App Store",
-                    href: "",
                     icon: require("../../assets/img/common/ios.svg"),
-                    // qrcode: require("../../assets/img/common/ios.jpg"),
-                    placeholder: "即将上线",
                 },
                 {
                     key: "android",
                     name: "Android",
-                    href: "",
                     icon: require("../../assets/img/common/android.svg"),
-                    // qrcode: require("../../assets/img/common/android.jpg"),
-                    placeholder: "即将上线",
                 },
                 {
                     key: "harmonyNext",
                     name: "鸿蒙 NEXT",
-                    href: "",
                     icon: require("../../assets/img/common/harmony.svg"),
-                    // qrcode: require("../../assets/img/common/harmony.jpg"),
-                    placeholder: "即将上线",
                 },
                 {
                     key: "miniProgram",
                     name: "小程序",
                     labelKey: "jx3boxHelper",
                     label: "JX3BOX小助手",
-                    href: "",
                     icon: require("../../assets/img/common/miniprogram.svg"),
                     qrcode: require("../../assets/img/common/miniprogram.jpg"),
                 },
             ],
         };
     },
-    computed: {},
+    computed: {
+        activePlatformItem() {
+            return this.downloadLinks.find((item) => item.key === this.activePlatform) || this.downloadLinks[0];
+        },
+        activePlatformLabel() {
+            return this.getDownloadName(this.activePlatformItem);
+        },
+        activeDialogTitle() {
+            const map = {
+                appStore: "App Store",
+                android: "Android",
+                harmonyNext: "鸿蒙NEXT",
+            };
+            return map[this.activePlatform] || this.activePlatformLabel;
+        },
+        appLogo() {
+            return this.appConfig.app_logo || APP_LOGO_FALLBACK;
+        },
+        appName() {
+            return "魔盒APP";
+        },
+        appVersion() {
+            return this.appConfig.android_versions || "";
+        },
+        appDescription() {
+            return this.appConfig.app_version_desc || "";
+        },
+        androidDownloadUrl() {
+            return this.appConfig.android_apk || "";
+        },
+        activeDownloadUrl() {
+            if (this.activePlatform === "android") return this.androidDownloadUrl;
+            if (this.activePlatform === "harmonyNext") return HARMONY_STORE_LINK;
+            return APPLE_STORE_LINK;
+        },
+        activeDownloadText() {
+            const map = {
+                appStore: "前往苹果商店",
+                android: "下载 Android",
+                harmonyNext: "前往鸿蒙商店",
+            };
+            return map[this.activePlatform] || "立即下载";
+        },
+        currentPreviewImages() {
+            return this.previewImages[this.activePreviewDevice] || [];
+        },
+    },
     watch: {},
     methods: {
         copyText,
         getDownloadName(item) {
-            if (item?.key) {
-                const k = item.key === "harmonyNext" ? "harmonyNext" : item.key;
-                const maybe = `jx3boxUi.commonFooter.${k}`;
-                return this.$jx3boxT(maybe, item.name || k);
-            }
-            return item?.name || "";
+            if (!item?.key) return item?.name || "";
+            return this.$jx3boxT(`jx3boxUi.commonFooter.${item.key}`, item.name || item.key);
         },
         getDownloadLabel(item) {
-            if (item?.labelKey)
+            if (item?.labelKey) {
                 return this.$jx3boxT(`jx3boxUi.commonFooter.${item.labelKey}`, item.label || item.labelKey);
+            }
             return item?.label || "";
         },
-        handleLinkClick(e, item) {
-            if (!item?.href) e.preventDefault();
+        openDownloadDialog(item) {
+            this.activePlatform = item.key;
+            this.activePreviewDevice = "phone";
+            this.appDescExpanded = false;
+            this.downloadDialogVisible = true;
+            this.loadAppConfig();
+        },
+        openActiveDownload() {
+            if (!this.activeDownloadUrl) return;
+            window.open(this.activeDownloadUrl, "_blank", "noopener,noreferrer");
+        },
+        loadAppConfig() {
+            const storeConfig = this.getStoreAppConfig();
+            if (storeConfig) {
+                this.appConfig = {
+                    ...this.appConfig,
+                    ...storeConfig,
+                };
+                this.appConfigLoaded = true;
+                return Promise.resolve();
+            }
+            if (this.appConfigLoading || this.appConfigLoaded) return Promise.resolve();
+            this.appConfigLoading = true;
+            return getConfig({ subtype: "app" })
+                .then((items) => {
+                    this.appConfig = this.getAppConfigFromItems(items);
+                    this.appConfigLoaded = true;
+                })
+                .catch(() => {
+                    this.appConfig = {};
+                })
+                .finally(() => {
+                    this.appConfigLoading = false;
+                });
+        },
+        getStoreAppConfig() {
+            const config = this.$store?.state?.config || {};
+            const appConfig = APP_CONFIG_KEYS.reduce((result, key) => {
+                if (config[key]) result[key] = config[key];
+                return result;
+            }, {});
+            return Object.keys(appConfig).length ? appConfig : null;
+        },
+        getAppConfigFromItems(items) {
+            if (!Array.isArray(items)) return {};
+            return items.reduce((config, item) => {
+                if (!item?.key || !APP_CONFIG_KEYS.includes(item.key)) return config;
+                if (item.subtype && item.subtype !== "app") return config;
+                config[item.key] = item.val;
+                return config;
+            }, {});
+        },
+        getDescLines(description) {
+            return String(description || "")
+                .replace(/\\r\\n|\\n|\\r/g, "\n")
+                .split(/\r?\n/);
+        },
+        hasDescFold(description) {
+            return this.getDescLines(description).length > 1;
+        },
+        getFoldedDesc(description, expanded = false) {
+            const lines = this.getDescLines(description);
+            return expanded ? lines.join("\n") : lines[0] || "";
+        },
+        toggleAppDesc() {
+            if (!this.hasDescFold(this.appDescription)) return;
+            this.appDescExpanded = !this.appDescExpanded;
+        },
+        handleLogoError(e) {
+            e.target.src = APP_LOGO_FALLBACK;
         },
         gotoQQbot() {
             window.open("/qqbot", "_blank");
@@ -190,7 +369,7 @@ export default {
         font-size: 14px;
         font-weight: 600;
         line-height: 20px;
-        letter-spacing: 0.025em;
+        letter-spacing: 0;
     }
 
     &__grid {
@@ -225,17 +404,10 @@ export default {
         line-height: 16px;
     }
 
-    &__placeholder {
-        padding: 12px;
-        text-align: center;
-        font-size: 12px;
-        font-weight: 600;
-        line-height: 16px;
-    }
-
     &__download {
         display: flex;
         align-items: center;
+        width: 100%;
         height: 48px;
         padding: 0 16px;
         border: 1px solid #374151;
@@ -244,12 +416,16 @@ export default {
         color: #d1d5db;
         font-size: 12px;
         line-height: 16px;
+        text-align: left;
         text-decoration: none;
-        transition: background-color 0.2s ease, border-color 0.2s ease;
+        cursor: pointer;
+        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
 
-        &:hover {
+        &:hover,
+        &.is-active {
             border-color: #3b82f6;
             background: #374151;
+            color: #fff;
         }
     }
 
@@ -260,6 +436,7 @@ export default {
         width: 16px;
         height: 16px;
         margin-right: 10px;
+        flex-shrink: 0;
 
         img {
             display: block;
@@ -317,7 +494,7 @@ export default {
         font-size: 10px;
         font-weight: 700;
         line-height: 14px;
-        letter-spacing: 0.05em;
+        letter-spacing: 0;
         text-transform: uppercase;
     }
 
@@ -346,4 +523,271 @@ export default {
         }
     }
 }
+
+.m-footer-app-dialog {
+    margin-top: 5vh !important;
+    width: min(960px, calc(100vw - 32px)) !important;
+
+    .el-dialog__header {
+        margin-right: 0;
+        padding: 20px 24px 12px;
+        border-bottom: 1px solid #e5eaf4;
+    }
+
+    .el-dialog__title {
+        color: #1f2937;
+        font-size: 18px;
+        font-weight: 700;
+    }
+
+    .el-dialog__body {
+        padding: 24px;
+    }
+
+    .m-footer-app-download {
+        min-height: 280px;
+    }
+
+    .u-app-header {
+        display: flex;
+        align-items: flex-start;
+        gap: 16px;
+        padding: 0 0 24px;
+        border-bottom: 1px solid #e5eaf4;
+    }
+
+    .u-app-icon {
+        width: 72px;
+        height: 72px;
+        border: 1px solid #e5eaf4;
+        border-radius: 18px;
+        object-fit: cover;
+        flex-shrink: 0;
+        box-shadow: 0 10px 24px rgba(79, 115, 201, 0.14);
+    }
+
+    .u-app-meta {
+        flex: 1;
+        min-width: 0;
+    }
+
+    .u-app-name {
+        color: #111827;
+        font-size: 22px;
+        font-weight: 700;
+        line-height: 1.3;
+        word-break: break-word;
+    }
+
+    .u-app-version {
+        margin-top: 6px;
+        color: #2d63ef;
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 1.5;
+    }
+
+    .u-app-desc-box {
+        display: flex;
+        align-items: flex-start;
+        gap: 6px;
+        margin-top: 10px;
+        color: #4b5563;
+
+        &.is-foldable {
+            cursor: pointer;
+        }
+
+        &.is-expanded {
+            .u-app-desc {
+                display: block;
+                white-space: pre-wrap;
+            }
+        }
+    }
+
+    .u-desc-toggle {
+        margin-top: 6px;
+        color: #8a94a6;
+        flex-shrink: 0;
+    }
+
+    .u-app-desc {
+        display: -webkit-box;
+        overflow: hidden;
+        color: #4b5563;
+        font-size: 14px;
+        line-height: 1.8;
+        white-space: pre-wrap;
+        word-break: break-word;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+    }
+
+    .u-app-download-action {
+        margin-left: auto;
+        flex-shrink: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 8px;
+    }
+
+    .u-app-store-button {
+        flex-shrink: 0;
+
+        .u-button-icon {
+            margin-right: 6px;
+        }
+    }
+
+    .u-app-download-tip {
+        color: #8a94a6;
+        font-size: 12px;
+        line-height: 18px;
+        white-space: nowrap;
+    }
+
+    .u-app-preview {
+        padding-top: 24px;
+    }
+
+    .u-app-preview-tabs {
+        display: flex;
+        justify-content: center;
+        gap: 12px;
+        margin-bottom: 20px;
+    }
+
+    .u-preview-tab {
+        min-width: 108px;
+        padding: 10px 18px;
+        border: 1px solid #d7e1f5;
+        border-radius: 999px;
+        background: #f7f9fe;
+        color: #5c6b84;
+        font-size: 14px;
+        font-weight: 600;
+        cursor: pointer;
+        transition: all 0.2s ease;
+
+        &:hover {
+            border-color: #9ab6ff;
+            color: #2d63ef;
+        }
+
+        &.is-active {
+            border-color: #4f73c9;
+            background: linear-gradient(135deg, #eff4ff 0%, #dfe9ff 100%);
+            color: #2349a6;
+            box-shadow: 0 10px 20px rgba(79, 115, 201, 0.16);
+        }
+    }
+
+    .u-app-preview-list {
+        display: grid;
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        gap: 16px;
+
+        &.is-phone {
+            .u-app-preview-card {
+                aspect-ratio: 9 / 16;
+            }
+        }
+
+        &.is-pad {
+            .u-app-preview-card {
+                aspect-ratio: 3 / 4;
+            }
+        }
+    }
+
+    .u-app-preview-card {
+        padding: 10px;
+        border: 1px solid #e0e8f7;
+        border-radius: 18px;
+        background: linear-gradient(180deg, #f9fbff 0%, #eef3ff 100%);
+        box-shadow: 0 10px 24px rgba(79, 115, 201, 0.08);
+    }
+
+    .u-app-preview-image {
+        display: block;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        border-radius: 12px;
+        background: #fff;
+        cursor: pointer;
+
+        .el-image__inner {
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .m-footer-app-dialog {
+        width: calc(100vw - 24px) !important;
+
+        .el-dialog__header {
+            padding: 18px 16px 12px;
+        }
+
+        .el-dialog__body {
+            padding: 16px;
+        }
+
+        .u-app-header {
+            display: grid;
+            grid-template-columns: 64px minmax(0, 1fr);
+            gap: 14px;
+            padding-bottom: 18px;
+        }
+
+        .u-app-icon {
+            width: 64px;
+            height: 64px;
+            border-radius: 16px;
+        }
+
+        .u-app-name {
+            font-size: 20px;
+        }
+
+        .u-app-download-action {
+            grid-column: 1 / -1;
+            width: 100%;
+            margin-left: 0;
+            align-items: stretch;
+        }
+
+        .u-app-store-button {
+            width: 100%;
+        }
+
+        .u-app-download-tip {
+            text-align: center;
+        }
+
+        .u-app-preview {
+            padding-top: 18px;
+        }
+
+        .u-app-preview-tabs {
+            gap: 10px;
+            margin-bottom: 16px;
+        }
+
+        .u-preview-tab {
+            min-width: 0;
+            flex: 1;
+            padding: 10px 12px;
+        }
+
+        .u-app-preview-list {
+            grid-template-columns: 1fr;
+        }
+    }
+}
 </style>

package/src/single/SimpleThx.vue

@@ -16,7 +16,7 @@
                 :client="client"
             />
             <Like :postId="postId" :postType="postType"></Like>
-            <fav :postId="postId" :postType="postType" :postTitle="postTitle" :author_id="userId"></fav>
+            <fav :postId="postId" :postType="postType" :postTitle="postTitle" :author_id="postAuthorId"></fav>
             <boxcoin-user
                 :postId="postId"
                 :postType="postType"
@@ -96,6 +96,10 @@ export default {
             type: [Number, String],
             default: 0,
         },
+        authorId: {
+            type: [Number, String],
+            default: 0,
+        },
         authors: {
             type: Array,
             default: () => [],
@@ -150,6 +154,9 @@ export default {
         post_keys: function () {
             return [this.postId, this.postType];
         },
+        postAuthorId: function () {
+            return this.authorId || this.userId;
+        },
     },
     watch: {
         post_keys: {

package/src/stories/layout/SuspendCommon.stories.js

@@ -30,6 +30,7 @@ export const Default = {
                 avatar: 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png',
                 author_id: 8,
             },
+            author_id: 8,
             subscribeType: '',
             postType: '',
             id: '',

package/src/stories/single/RightAffix.stories.js

@@ -13,6 +13,7 @@ const meta = {
         postId: { control: 'number' },
         postType: { control: 'text' },
         postTitle: { control: 'text' },
+        authorId: { control: 'number' },
         showComment: { control: 'boolean' },
     },
 };
@@ -24,6 +25,7 @@ export const Default = {
         postId: 80449,
         postType: 'bbs',
         postTitle: '轻剑驭风版本攻略示例',
+        authorId: 8,
         showComment: true,
     },
     render: (args) => ({
@@ -58,6 +60,7 @@ export const Default = {
                     { name: 'postId', type: 'String | Number', default: '""', description: '当前文章 ID，用于收藏查询。' },
                     { name: 'postType', type: 'String', default: '""', description: '文章类型，例如 bbs / pvx。' },
                     { name: 'postTitle', type: 'String', default: '""', description: '文章标题，用于收藏请求。' },
+                    { name: 'authorId', type: 'String | Number', default: '""', description: '收藏请求携带的作者 UID。' },
                     { name: 'showComment', type: 'Boolean | Number', default: 'false', description: '是否展示评论入口按钮。' },
                 ],
             };

package/src/stories/single/SimpleThx.stories.js

@@ -22,6 +22,7 @@ export const Default = {
                     { name: 'postType', type: 'String', default: '""', required: true, description: '文章类型。' },
                     { name: 'postTitle', type: 'String', default: '""', description: '文章标题。' },
                     { name: 'userId', type: 'Number | String', default: '0', description: '作者 UID。' },
+                    { name: 'authorId', type: 'Number | String', default: '0', description: '收藏请求携带的作者 UID，未传时回退到 userId。' },
                     { name: 'adminBoxcoinEnable / userBoxcoinEnable', type: 'Boolean', default: 'false', description: '控制打赏区显示。' },
                     { name: 'presetConfig', type: 'Object', default: '{}', description: 'Storybook 下可直接注入打赏配置，避免空态。' },
                 ],
@@ -30,7 +31,7 @@ export const Default = {
         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);">
-                    <SimpleThx post-type="bbs" post-title="轻剑驭风版本攻略示例" :post-id="80449" :user-id="8" :admin-boxcoin-enable="true" :user-boxcoin-enable="true" :allow-gift="true" :preset-config="presetConfig" />
+                    <SimpleThx post-type="bbs" post-title="轻剑驭风版本攻略示例" :post-id="80449" :user-id="8" :author-id="8" :admin-boxcoin-enable="true" :user-boxcoin-enable="true" :allow-gift="true" :preset-config="presetConfig" />
                 </section>
                 <StoryPropsTable title="SimpleThx" description="简化互动条组件。" :items="propsInfo" />
             </div>