@jx3box/jx3box-ui 2.3.11 → 2.3.12

package/package.json

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

package/src/CommonHeader.vue

@@ -27,6 +27,7 @@
                 :header-config-loaded="headerConfigLoaded"
                 :header-config-managed="true"
                 :account-ready-issues="accountReadyIssues"
+                :account-ready-incomplete="accountReadyIncomplete"
                 @open-account-ready="openAccountReadyDialog"
             />
         </div>
@@ -45,8 +46,8 @@
             <p class="u-desc">为了保障 App 登录、账号找回和卡密等功能正常使用，请先补全以下账号安全信息。</p>
             <div class="u-list">
                 <div class="u-item" v-if="accountReadyIssues.includes('contact')">
-                    <div class="u-title">绑定邮箱或手机号</div>
-                    <div class="u-text">当前账号还没有可用的邮箱或手机号。请至少绑定其中一项，否则后续可能无法找回账号。</div>
+                    <div class="u-title">绑定邮箱和手机号</div>
+                    <div class="u-text">当前账号的邮箱或手机号尚未完善。请完成手机号绑定，并绑定且验证邮箱，否则后续可能无法找回账号。</div>
                     <el-button type="primary" @click="goAccountReady('/dashboard/notice')">去绑定</el-button>
                 </div>
                 <div class="u-item" v-if="accountReadyIssues.includes('password')">
@@ -89,6 +90,7 @@ import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
 
 const HEADER_CONFIG_KEYS = ["important_notice", "important_notice_url", "vip", "mall", "user_profile_ready"];
 const ACCOUNT_READY_STORAGE_PREFIX = "jx3box:account-ready-dismissed-until";
+const ACCOUNT_READY_COMPLETE_STORAGE_PREFIX = "jx3box:account-ready-complete";
 const ACCOUNT_READY_DISMISS_INTERVAL = 7 * 24 * 60 * 60 * 1000;
 
 export default {
@@ -114,6 +116,7 @@ export default {
             headerConfigLoaded: false,
             accountReadyDialogVisible: false,
             accountReadyIssues: [],
+            accountReadyIncomplete: false,
             accountReadyChecking: false,
         };
     },
@@ -192,6 +195,7 @@ export default {
             if (User.isLogin()) {
                 this.loadAsset();
                 this.refreshAuthToken();
+                this.initAccountReadyState();
             }
 
             // 获取全局配置
@@ -267,13 +271,13 @@ export default {
             })
                 .then((data) => {
                     this.headerConfig = this.normalizeHeaderConfig(data);
-                    this.checkAccountReadiness();
                 })
                 .catch(() => {
                     this.headerConfig = {};
                 })
                 .finally(() => {
                     this.headerConfigLoaded = true;
+                    this.checkAccountReadiness();
                 });
         },
         normalizeHeaderConfig: function (data) {
@@ -294,9 +298,31 @@ export default {
         isAccountReadyEnabled: function () {
             return String(this.getConfigValue("user_profile_ready") || "").trim() === "1";
         },
-        getAccountReadyStorageKey: function () {
+        getAccountReadyUserId: function () {
             const uid = User.getInfo()?.uid || localStorage.getItem("uid") || "0";
-            return `${ACCOUNT_READY_STORAGE_PREFIX}:${uid}`;
+            return uid || "0";
+        },
+        getAccountReadyStorageKey: function () {
+            return `${ACCOUNT_READY_STORAGE_PREFIX}:${this.getAccountReadyUserId()}`;
+        },
+        getAccountReadyCompleteStorageKey: function () {
+            return `${ACCOUNT_READY_COMPLETE_STORAGE_PREFIX}:${this.getAccountReadyUserId()}`;
+        },
+        isAccountReadyCompleted: function () {
+            try {
+                return !!localStorage.getItem(this.getAccountReadyCompleteStorageKey());
+            } catch (e) {
+                return false;
+            }
+        },
+        markAccountReadyCompleted: function () {
+            try {
+                localStorage.setItem(this.getAccountReadyCompleteStorageKey(), String(Date.now()));
+            } catch (e) {}
+            this.clearAccountReadyDismissed();
+        },
+        initAccountReadyState: function () {
+            this.accountReadyIncomplete = !this.isAccountReadyCompleted();
         },
         isAccountReadyDismissed: function () {
             try {
@@ -316,7 +342,7 @@ export default {
         },
         buildAccountReadyIssues: function (status = {}) {
             const issues = [];
-            if (!status.has_phone && !status.has_verified_email) {
+            if (!status.has_phone || !status.has_verified_email) {
                 issues.push("contact");
             }
             if (!status.has_password) {
@@ -329,8 +355,12 @@ export default {
         },
         checkAccountReadiness: function () {
             if (this.accountReadyChecking || !User.isLogin()) return;
-            if (this.isAccountReadyTargetPage()) return;
-            if (!this.isAccountReadyEnabled()) return;
+            if (this.isAccountReadyCompleted()) {
+                this.accountReadyIssues = [];
+                this.accountReadyIncomplete = false;
+                this.accountReadyDialogVisible = false;
+                return;
+            }
 
             this.accountReadyChecking = true;
             getMyAccountStatus()
@@ -338,12 +368,14 @@ export default {
                     const issues = this.buildAccountReadyIssues(status);
                     if (!issues.length) {
                         this.accountReadyIssues = [];
+                        this.accountReadyIncomplete = false;
                         this.accountReadyDialogVisible = false;
-                        this.clearAccountReadyDismissed();
+                        this.markAccountReadyCompleted();
                         return;
                     }
                     this.accountReadyIssues = issues;
-                    if (!this.isAccountReadyDismissed()) {
+                    this.accountReadyIncomplete = true;
+                    if (this.isAccountReadyEnabled() && !this.isAccountReadyTargetPage() && !this.isAccountReadyDismissed()) {
                         this.accountReadyDialogVisible = true;
                     }
                 })
@@ -357,9 +389,35 @@ export default {
                 localStorage.removeItem(this.getAccountReadyStorageKey());
             } catch (e) {}
         },
-        openAccountReadyDialog: function () {
-            if (!this.accountReadyIssues.length) return;
-            this.accountReadyDialogVisible = true;
+        openAccountReadyDialog: function (issues) {
+            if (Array.isArray(issues) && issues.length) {
+                this.accountReadyIssues = issues;
+            }
+            if (this.accountReadyIssues.length) {
+                this.accountReadyDialogVisible = true;
+                return;
+            }
+            if (!User.isLogin() || this.isAccountReadyCompleted()) return;
+
+            this.accountReadyChecking = true;
+            getMyAccountStatus()
+                .then((status) => {
+                    const freshIssues = this.buildAccountReadyIssues(status);
+                    if (!freshIssues.length) {
+                        this.accountReadyIssues = [];
+                        this.accountReadyIncomplete = false;
+                        this.accountReadyDialogVisible = false;
+                        this.markAccountReadyCompleted();
+                        return;
+                    }
+                    this.accountReadyIssues = freshIssues;
+                    this.accountReadyIncomplete = true;
+                    this.accountReadyDialogVisible = true;
+                })
+                .catch(() => {})
+                .finally(() => {
+                    this.accountReadyChecking = false;
+                });
         },
         goAccountReady: function (url) {
             this.markAccountReadyDismissed();

package/src/header/manage.vue

@@ -22,7 +22,7 @@
                         <span v-if="item.remark == 'auth' && !isAuth" class="u-new">New!</span>
                     </a>
                     <a
-                        v-if="item.remark === 'feature' && hasAccountReadyIssue"
+                        v-if="isFeaturePanelItem(item) && hasAccountReadyIssue"
                         href="javascript:;"
                         class="u-menu-item u-menu-item--account-ready"
                         @click.prevent="openAccountReady"
@@ -100,6 +100,10 @@ export default {
             type: Array,
             default: () => [],
         },
+        accountReadyIncomplete: {
+            type: Boolean,
+            default: false,
+        },
     },
     emits: ["open-account-ready"],
     computed: {
@@ -117,10 +121,10 @@ export default {
             return User.isPhoneMember();
         },
         hasAccountReadyIssue() {
-            return this.accountReadyIssues.length > 0;
+            return this.accountReadyIncomplete;
         },
         showPanelPop() {
-            return this.showPop || this.hasAccountReadyIssue || !this.isAuth;
+            return this.showPop || this.hasAccountReadyIssue;
         },
     },
     mounted() {
@@ -140,6 +144,9 @@ export default {
             if (item?.key) return this.$jx3boxT(`jx3boxUi.commonHeader.panel.${item.key}`, item.label || item.key);
             return item?.label || "";
         },
+        isFeaturePanelItem(item = {}) {
+            return item.remark === "feature" || !!item.meta || item.key === "featureUpdate" || item.label === "功能更新";
+        },
         loadPanel: async function () {
             try {
                 const panel = JSON.parse(sessionStorage.getItem("panel"));
@@ -194,7 +201,7 @@ export default {
             }
         },
         openAccountReady() {
-            this.$emit("open-account-ready");
+            this.$emit("open-account-ready", this.accountReadyIssues);
         },
     },
 };

package/src/header/user.vue

@@ -24,7 +24,8 @@
                 :header-config-loaded="headerConfigLoaded"
                 :header-config-managed="headerConfigManaged"
                 :account-ready-issues="accountReadyIssues"
-                @open-account-ready="$emit('open-account-ready')"
+                :account-ready-incomplete="accountReadyIncomplete"
+                @open-account-ready="$emit('open-account-ready', $event)"
             />
 
             <!-- 语言切换 -->
@@ -101,6 +102,10 @@ export default {
             type: Array,
             default: () => [],
         },
+        accountReadyIncomplete: {
+            type: Boolean,
+            default: false,
+        },
     },
     emits: ["open-account-ready"],
     components: {

package/src/stories/layout/CommonHeader.stories.js

@@ -56,6 +56,7 @@ export const AccountReadyMock = {
             localStorage.setItem('token_version', 'storybook');
             localStorage.setItem('avatar', 'https://cdn.jx3box.com/upload/avatar/2022/3/2/8_9860765.png');
             localStorage.removeItem('jx3box:account-ready-dismissed-until:8');
+            localStorage.removeItem('jx3box:account-ready-complete:8');
             sessionStorage.removeItem('panel');
 
             return { args };