@jx3box/jx3box-ui 2.3.7 → 2.3.9

package/package.json

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

package/src/CommonHeader.vue

@@ -18,7 +18,15 @@
             </div>
 
             <!-- user -->
-            <header-user ref="user" class="c-header__user" :client="client" :asset="asset" />
+            <header-user
+                ref="user"
+                class="c-header__user"
+                :client="client"
+                :asset="asset"
+                :header-config="headerConfig"
+                :header-config-loaded="headerConfigLoaded"
+                :header-config-managed="true"
+            />
         </div>
         <header-box v-if="isMobile" class="c-header__box c-header-jx3box" :overlayEnable="overlayEnable" />
         <header-box2 v-else class="c-header__box c-header__box--desktop" />
@@ -45,9 +53,12 @@ import miniprogram from "@jx3box/jx3box-common/data/miniprogram.json";
 
 // 数据
 import { getGlobalConfig } from "../service/header";
+import { getConfig } from "../service/cms";
 import User from "@jx3box/jx3box-common/js/user.js";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 
+const HEADER_CONFIG_KEYS = ["important_notice", "important_notice_url", "vip", "mall"];
+
 export default {
     name: "Header",
     components: {
@@ -67,6 +78,8 @@ export default {
             isMobile: window.innerWidth <= 768,
 
             asset: {},
+            headerConfig: {},
+            headerConfigLoaded: false,
         };
     },
     computed: {
@@ -133,6 +146,7 @@ export default {
         // 检查
         init: function () {
             this.checkIsWebView();
+            this.loadHeaderConfig();
 
             const token = this.getUrlParam("__token");
             const env = this.getUrlParam("__env");
@@ -199,6 +213,31 @@ export default {
                 }
             });
         },
+        loadHeaderConfig: function () {
+            getConfig({
+                key: HEADER_CONFIG_KEYS.join(","),
+            })
+                .then((data) => {
+                    this.headerConfig = this.normalizeHeaderConfig(data);
+                })
+                .catch(() => {
+                    this.headerConfig = {};
+                })
+                .finally(() => {
+                    this.headerConfigLoaded = true;
+                });
+        },
+        normalizeHeaderConfig: function (data) {
+            if (Array.isArray(data)) {
+                return data.reduce((result, item) => {
+                    if (item?.key) {
+                        result[item.key] = item;
+                    }
+                    return result;
+                }, {});
+            }
+            return data?.key ? { [data.key]: data } : {};
+        },
         updateScreen() {
             this.isMobile = window.innerWidth <= 768;
         },

package/src/header/manage.vue

@@ -1,14 +1,16 @@
 <template>
     <div class="c-header-panel c-header-manage" id="c-header-manage">
         <span class="u-post u-manage">
-            <i class="u-pop" style="display: none" v-show="showPop || !isAuth"></i>
-            <!-- <manageIcon class="u-add" /> -->
-            <img
-                class="u-add"
-                svg-inline
-                src="../../assets/img/common/manage.svg"
-                :alt="$jx3boxT('jx3boxUi.commonHeader.manageCenter', '扩展中心')"
-            />
+            <i class="u-icon u-icon-msg">
+                <i class="u-pop" style="display: none" v-show="showPop || !isAuth"></i>
+                <!-- <manageIcon class="u-add" /> -->
+                <img
+                    class="u-add"
+                    svg-inline
+                    src="../../assets/img/common/manage.svg"
+                    :alt="$jx3boxT('jx3boxUi.commonHeader.manageCenter', '扩展中心')"
+                />
+            </i>
         </span>
         <ul class="u-menu u-pop-content">
             <template v-for="item in userPanel">
@@ -39,8 +41,10 @@ import { getMenu } from "../../service/header";
 import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 import User from "@jx3box/jx3box-common/js/user";
 import i18nMixin from "../../i18n/mixin";
+import { getConfig } from "../../service/cms";
 // import manageIcon from "@/assets/img/components/common/header/manage.svg";
 const { __imgPath } = JX3BOX;
+const NOTICE_POP_KEY = "notice_pop";
 const defaultPanel = [
     {
         key: "manageCenter",
@@ -66,6 +70,22 @@ export default {
             type: Boolean,
             default: false,
         },
+        importantNotice: {
+            type: Object,
+            default: null,
+        },
+        importantNoticeUrl: {
+            type: Object,
+            default: null,
+        },
+        headerConfigLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        headerConfigManaged: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         userPanel: function () {
@@ -83,23 +103,35 @@ export default {
         },
     },
     mounted() {
-        this.loadPanel();
+        if (this.headerConfigLoaded) {
+            this.loadPanel();
+        }
+    },
+    watch: {
+        headerConfigLoaded: function (val) {
+            if (val) {
+                this.loadPanel();
+            }
+        },
     },
     methods: {
         getPanelLabel(item) {
             if (item?.key) return this.$jx3boxT(`jx3boxUi.commonHeader.panel.${item.key}`, item.label || item.key);
             return item?.label || "";
         },
-        loadPanel: function () {
+        loadPanel: async function () {
             try {
                 const panel = JSON.parse(sessionStorage.getItem("panel"));
+                const noticeConfig = await this.getNoticeConfig("important_notice", this.importantNotice);
+                const noticeUrlConfig = await this.getNoticeConfig("important_notice_url", this.importantNoticeUrl);
                 if (panel) {
-                    this.panel = panel;
+                    this.panel = this.applyNoticeConfig(panel, noticeConfig, noticeUrlConfig);
                     const item = this.panel?.find((i) => i.meta);
                     this.initMeta(item);
+                    sessionStorage.setItem("panel", JSON.stringify(this.panel));
                 } else {
                     getMenu("panel").then((res) => {
-                        this.panel = res.data?.data?.val;
+                        this.panel = this.applyNoticeConfig(res.data?.data?.val, noticeConfig, noticeUrlConfig);
                         const item = this.panel?.find((i) => i.meta);
                         this.initMeta(item);
                         sessionStorage.setItem("panel", JSON.stringify(this.panel));
@@ -110,22 +142,33 @@ export default {
                 console.log("loadPanel error", e);
             }
         },
+        getNoticeConfig: async function (key, config) {
+            if (config) return config;
+            if (this.headerConfigManaged) return null;
+            return await getConfig({ key }).catch(() => null);
+        },
+        applyNoticeConfig: function (panel = [], noticeConfig, noticeUrlConfig) {
+            const items = panel?.length ? panel : defaultPanel;
+            return items.map((item) => {
+                if (item.remark !== "feature") return item;
+                return {
+                    ...item,
+                    link: noticeUrlConfig?.val || item.link,
+                    meta: noticeConfig?.val || item.meta,
+                };
+            });
+        },
         resolveImg: function (img) {
             return img ? __imgPath + "image/header/panel/" + img : __imgPath + "image/header/panel/default.svg";
         },
         initMeta(item) {
-            const local = localStorage.getItem("jb_panel_meta");
-
-            if (local) {
-                this.showPop = item?.meta && item?.meta != local;
-            } else {
-                localStorage.setItem("jb_panel_meta", item?.meta);
-                this.showPop = true;
-            }
+            const meta = item?.meta;
+            const local = localStorage.getItem(NOTICE_POP_KEY);
+            this.showPop = !!meta && meta != local;
         },
         onClick(item) {
             if (item.meta) {
-                localStorage.setItem("jb_panel_meta", item.meta);
+                localStorage.setItem(NOTICE_POP_KEY, item.meta);
                 this.showPop = false;
             }
         },
@@ -173,6 +216,7 @@ export default {
 
     .u-icon-msg {
         .pr;
+        .size(18px);
     }
 
     .u-pop {
@@ -181,11 +225,11 @@ export default {
         color: #fff;
         background-image: linear-gradient(#fcd14f, #d7a20b);
         background-clip: padding-box;
-        border: 2px solid #24292e;
+        border: 2px solid @header-bg;
         border-radius: 50%;
         position: absolute;
-        right: 4px;
-        top: 18px;
+        right: -5px;
+        top: -4px;
         z-index: 1;
     }
 

package/src/header/message.vue

@@ -81,7 +81,7 @@ export default {
         border-radius: 50%;
         position: absolute;
         right: -5px;
-        top: -2px;
+        top: -4px;
         .z(1);
     }
 }

package/src/header/shop.vue

@@ -6,7 +6,7 @@
             placement="bottom"
             popper-class="c-header-tooltip"
         >
-            <a class="u-present" href="/vip/mall">
+            <a class="u-present" href="/vip/mall" @click="markPopRead">
                 <i class="u-icon u-icon-msg">
                     <i class="u-pop" style="display: none" v-show="pop"></i>
                     <!-- <shopIcon class="u-icon" /> -->
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
+import { getConfig, getUserMeta } from "../../service/cms";
 import User from "@jx3box/jx3box-common/js/user";
 import i18nMixin from "../../i18n/mixin";
 // import shopIcon from "@/assets/img/components/common/header/gift.svg";
@@ -36,52 +36,66 @@ export default {
     data: function () {
         return {
             pop: false,
+            initialized: false,
+            popValue: "",
         };
     },
+    props: {
+        config: {
+            type: Object,
+            default: null,
+        },
+        configLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        configManaged: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    watch: {
+        configLoaded: function (val) {
+            if (val) {
+                this.init();
+            }
+        },
+    },
     mounted() {
-        this.init();
+        if (this.configLoaded) {
+            this.init();
+        }
     },
     methods: {
         async init() {
+            if (this.initialized) return;
             /**
-             * 1. 用户第一次进入页面时，没有记录，则显示，并记录到meta
-             * 2. 用户第二次进入页面，此时meta有记录，但是用户并未进入会员中心，则显示
-             *
-             * meta如果为null，说明用户未登录，不显示
-             * meta如果为0，说明用户已经看过，不显示，同时比较config的值，如果config的值大于local，更新local为config的值和meta为1
-             * meta如果为1，说明用户未看过，显示
+             * 只在点击入口后记录本地版本；仅看到气泡不算已处理。
              */
             let meta = null;
             if (User.isLogin()) {
                 meta = await getUserMeta({ key: "mall_pop" });
             }
-            let config = await getConfig({ key: "mall" });
-
-            if (meta == null) {
-                const val = ~~config.val;
-
-                if (val) {
-                    this.pop = true;
-                    localStorage.setItem("mall_pop", config.val);
-                    setUserMeta("mall_pop", { val: 1 });
-                }
-            } else {
-                if (meta == 1) {
-                    this.pop = true;
-
-                    localStorage.setItem("mall_pop", config.val);
-                } else {
-                    const local = localStorage.getItem("mall_pop");
+            let config = this.config || (this.configManaged ? null : await getConfig({ key: "mall" }));
+            if (!config) return;
+            this.initialized = true;
+            this.popValue = config.val;
 
-                    if (~~config.val > ~~local) {
-                        this.pop = true;
+            this.pop = this.shouldShowPop(meta, config.val);
+        },
+        shouldShowPop(meta, value) {
+            if (!~~value) return false;
 
-                        localStorage.setItem("mall_pop", config.val);
+            const local = localStorage.getItem("mall_pop");
+            if (String(local) === String(value)) return false;
 
-                        // setUserMeta("mall_pop", { val: 1 });
-                    }
-                }
-            }
+            if (meta == null || meta == 1) return true;
+            return ~~value > ~~local;
+        },
+        markPopRead() {
+            if (!this.pop || this.popValue == null) return;
+            localStorage.setItem("mall_pop", this.popValue);
+            this.pop = false;
         },
     },
 };
@@ -111,11 +125,11 @@ export default {
         color: #fff;
         background-image: linear-gradient(#fcd14f, #d7a20b);
         background-clip: padding-box;
-        border: 2px solid #24292e;
+        border: 2px solid @header-bg;
         border-radius: 50%;
         position: absolute;
         right: -5px;
-        top: -6px;
+        top: -4px;
         z-index: 1;
     }
 }

package/src/header/user.vue

@@ -8,16 +8,22 @@
             <publish />
 
             <!-- vip -->
-            <vip />
+            <vip :config="headerConfig.vip" :config-loaded="headerConfigLoaded" :config-managed="headerConfigManaged" />
 
             <!-- 商城 -->
-            <shop />
+            <shop :config="headerConfig.mall" :config-loaded="headerConfigLoaded" :config-managed="headerConfigManaged" />
 
             <!-- 我的资产 -->
             <asset :asset="asset" />
 
             <!-- manage -->
-            <manage :isTeammate="isTeammate" />
+            <manage
+                :isTeammate="isTeammate"
+                :important-notice="headerConfig.important_notice"
+                :important-notice-url="headerConfig.important_notice_url"
+                :header-config-loaded="headerConfigLoaded"
+                :header-config-managed="headerConfigManaged"
+            />
 
             <!-- 语言切换 -->
             <lang />
@@ -77,6 +83,18 @@ export default {
                 };
             },
         },
+        headerConfig: {
+            type: Object,
+            default: () => ({}),
+        },
+        headerConfigLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        headerConfigManaged: {
+            type: Boolean,
+            default: false,
+        },
     },
     components: {
         message,

package/src/header/vip.vue

@@ -6,7 +6,7 @@
             placement="bottom"
             popper-class="c-header-tooltip"
         >
-            <a class="u-post u-vip" href="/vip/premium">
+            <a class="u-post u-vip" href="/vip/premium" @click="markPopRead">
                 <i class="u-icon u-icon-msg">
                     <i class="u-pop" style="display: none" v-show="pop"></i>
                     <!-- <vipIcon class="u-add" /> -->
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import { getConfig, getUserMeta, setUserMeta } from "../../service/cms";
+import { getConfig, getUserMeta } from "../../service/cms";
 import User from "@jx3box/jx3box-common/js/user";
 import i18nMixin from "../../i18n/mixin";
 // import vipIcon from "@/assets/img/components/common/header/vip.svg";
@@ -36,48 +36,66 @@ export default {
     data: function () {
         return {
             pop: false,
+            initialized: false,
+            popValue: "",
         };
     },
+    props: {
+        config: {
+            type: Object,
+            default: null,
+        },
+        configLoaded: {
+            type: Boolean,
+            default: true,
+        },
+        configManaged: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    watch: {
+        configLoaded: function (val) {
+            if (val) {
+                this.init();
+            }
+        },
+    },
     mounted() {
-        this.init();
+        if (this.configLoaded) {
+            this.init();
+        }
     },
     methods: {
         async init() {
+            if (this.initialized) return;
             /**
-             * 1. 用户第一次进入页面时，没有记录，则显示，并记录到meta
-             * 2. 用户第二次进入页面，此时meta有记录，但是用户并未进入会员中心，则显示
+             * 只在点击入口后记录本地版本；仅看到气泡不算已处理。
              */
             let meta = null;
             if (User.isLogin()) {
                 meta = await getUserMeta({ key: "vip_pop" });
             }
-            let config = await getConfig({ key: "vip" });
-
-            if (meta == null) {
-                const val = ~~config.val;
-
-                if (val) {
-                    this.pop = true;
-                    localStorage.setItem("vip_pop", config.val);
-                    setUserMeta("vip_pop", { val: 1 });
-                }
-            } else {
-                if (meta == 1) {
-                    this.pop = true;
-
-                    localStorage.setItem("vip_pop", config.val);
-                } else {
-                    const local = localStorage.getItem("vip_pop");
+            let config = this.config || (this.configManaged ? null : await getConfig({ key: "vip" }));
+            if (!config) return;
+            this.initialized = true;
+            this.popValue = config.val;
 
-                    if (~~config.val > ~~local) {
-                        this.pop = true;
+            this.pop = this.shouldShowPop(meta, config.val);
+        },
+        shouldShowPop(meta, value) {
+            if (!~~value) return false;
 
-                        localStorage.setItem("vip_pop", config.val);
+            const local = localStorage.getItem("vip_pop");
+            if (String(local) === String(value)) return false;
 
-                        // setUserMeta("vip_pop", { val: 1 });
-                    }
-                }
-            }
+            if (meta == null || meta == 1) return true;
+            return ~~value > ~~local;
+        },
+        markPopRead() {
+            if (!this.pop || this.popValue == null) return;
+            localStorage.setItem("vip_pop", this.popValue);
+            this.pop = false;
         },
     },
 };
@@ -99,11 +117,11 @@ export default {
         color: #fff;
         background-image: linear-gradient(#fcd14f, #d7a20b);
         background-clip: padding-box;
-        border: 2px solid #24292e;
+        border: 2px solid @header-bg;
         border-radius: 50%;
         position: absolute;
         right: -5px;
-        top: -6px;
+        top: -4px;
         z-index: 1;
     }
     .u-vip {