From ef69b914b4be23d881746802f8f31ba54f0fc1e5 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Fri, 11 Jul 2025 11:15:04 +0800
Subject: [PATCH 1/3] =?UTF-8?q?refactor:=20=E6=8E=88=E6=9D=83=E5=BC=B9?=
 =?UTF-8?q?=E7=AA=97=E9=80=BB=E8=BE=91=E6=A2=B3=E7=90=86/=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=87=8D=E6=96=B0=E7=94=9F=E6=88=90=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../authorized-account-modal/index.vue        | 193 +++++----
 .../reauthorize-account-modal/index.vue       | 382 +++++++++---------
 2 files changed, 325 insertions(+), 250 deletions(-)

diff --git a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
index 0a614a1..266f28f 100644
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/index.vue
@@ -9,11 +9,12 @@
     title="授权账号"
     modal-class="authorized-account-modal"
     :mask-closable="false"
-    :footer="!isLoading"
+    :footer="modalState !== MODAL_STATE.LOADING"
     @close="close"
   >
     <div class="flex flex-col items-center">
-      <template v-if="isLoading">
+      <!-- 加载中状态 -->
+      <template v-if="modalState === MODAL_STATE.LOADING">
         <a-progress
           :percent="progress"
           color="#6D4CFE"
@@ -24,32 +25,48 @@
         />
         <p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
       </template>
+
       <template v-else>
-        <template v-if="isCompleted">
-          <img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
-          <p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
-          <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
+        <!-- 完成状态 -->
+        <template v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED">
+          <img :src="modalState === MODAL_STATE.SUCCESS ? icon2 : icon3" width="80" height="80" class="mb-16px" />
+          <p class="s2">{{ `数据初始化${modalState === MODAL_STATE.SUCCESS ? '成功' : '失败'}。` }}</p>
+          <p v-if="modalState === MODAL_STATE.FAILED" class="red-text">失败原因：{{ failReason || '-' }}</p>
         </template>
+
+        <!-- 二维码状态 -->
         <template v-else>
           <div class="img-box">
-            <template v-if="qrCodeLoading || isFailLoadQrCode">
+            <!-- 二维码加载中或失败 -->
+            <template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
               <div class="relative w-160px h-160px">
                 <a-image :src="icon1" width="160" height="160" />
                 <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
-                  <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
+                  <img
+                    v-if="modalState === MODAL_STATE.QR_FAILED"
+                    :src="icon4"
+                    width="24"
+                    height="24"
+                    class="mb-13px"
+                  />
                   <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
-                  <span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
-                    isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
-                  }}</span>
+                  <span
+                    :class="modalState === MODAL_STATE.QR_FAILED ? '!color-#F64B31' : '!color-#6D4CFE'"
+                    class="s2"
+                    >{{ modalState === MODAL_STATE.QR_FAILED ? '二维码生成失败' : '二维码生成中...' }}</span
+                  >
                 </div>
                 <div
                   class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
                 ></div>
               </div>
             </template>
+
+            <!-- 正常二维码 -->
             <a-image v-else :src="qrCodeUrl" width="160" height="160" />
 
-            <div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
+            <!-- 二维码失效遮罩 -->
+            <div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
               <icon-refresh size="24" class="mb-13px" />
               <p class="s1">二维码失效</p>
               <p class="s1">请点击刷新</p>
@@ -59,15 +76,29 @@
         </template>
       </template>
     </div>
+
     <template #footer>
-      <a-button v-if="isCompleted" size="large" class="cancel-btn" @click="close">取消</a-button>
-      <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
+      <a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" class="cancel-btn" @click="handleRefreshQrCode">
+        重新生成
+      </a-button>
+      <a-button
+        v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
+        size="large"
+        class="cancel-btn"
+        @click="close"
+      >
+        取消
+      </a-button>
+      <a-button type="primary" size="large" @click="handleOk">
+        {{ confirmBtnText }}
+      </a-button>
     </template>
   </a-modal>
 </template>
 
 <script setup>
-import { defineExpose, ref } from 'vue';
+import { defineExpose, ref, computed } from 'vue';
+import { Message as AMessage } from '@arco-design/web-vue';
 import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
@@ -75,52 +106,67 @@ import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 import icon4 from '@/assets/img/media-account/icon-warn.png';
 
-// 失效时间
-
 const emits = defineEmits(['update']);
 
-const OVERDUE_TIME = 30000;
+// 状态枚举
+const MODAL_STATE = {
+  QR_LOADING: 0, // 二维码加载中
+  QR_FAILED: 1, // 二维码生成失败
+  QR_READY: 2, // 二维码就绪，等待扫码
+  QR_EXPIRED: 3, // 二维码已过期
+  LOADING: 4, // 数据同步中
+  SUCCESS: 5, // 授权成功
+  FAILED: 6, // 授权失败
+};
+
+const OVERDUE_TIME = 30000; // 失效时间
 const visible = ref(false);
-const isOverdue = ref(false); // 二维码失效
-const isLoading = ref(false);
-const isCompleted = ref(false);
-const isSuccess = ref(false);
+const modalState = ref(MODAL_STATE.QR_LOADING);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 const platform = ref('');
-const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
-const qrCodeLoading = ref(false);
 
 let progressTimer = null;
 let overdueTimer = null;
 let statusPollingTimer = null;
 
+// 按钮文案映射
 const confirmBtnText = computed(() => {
-  if (isFailLoadQrCode.value) return '重新生成';
-  if (!isCompleted.value) return '完成扫码';
-  return isSuccess.value ? '继续添加' : '重新扫码';
+  const btnTextMap = {
+    [MODAL_STATE.QR_LOADING]: '完成扫码',
+    [MODAL_STATE.QR_FAILED]: '重新生成',
+    [MODAL_STATE.QR_READY]: '完成扫码',
+    [MODAL_STATE.QR_EXPIRED]: '重新生成',
+    [MODAL_STATE.LOADING]: '处理中...',
+    [MODAL_STATE.SUCCESS]: '继续添加',
+    [MODAL_STATE.FAILED]: '重新扫码',
+  };
+  return btnTextMap[modalState.value] || '确定';
+});
+
+// 按钮是否禁用
+const isBtnDisabled = computed(() => {
+  return false; // 所有状态下按钮都是可点击的
 });
 
 const open = (accountId, platformCode) => {
   id.value = accountId;
   platform.value = platformCode === 0 ? '抖音' : '小红书';
+  modalState.value = MODAL_STATE.QR_LOADING;
   getAuthorizedQrCode();
   visible.value = true;
 };
+
 const resetTaskFields = () => {
-  isOverdue.value = false;
-  isLoading.value = false;
-  isCompleted.value = false;
-  isSuccess.value = false;
+  modalState.value = MODAL_STATE.QR_LOADING;
   failReason.value = '';
   platform.value = '';
   progress.value = 0;
   qrCodeUrl.value = '';
-  qrCodeLoading.value = false;
-  isFailLoadQrCode.value = false;
 };
+
 const close = () => {
   resetTaskFields();
   id.value = '';
@@ -132,24 +178,22 @@ const close = () => {
 
 const getAuthorizedQrCode = async () => {
   try {
-    qrCodeLoading.value = true;
+    modalState.value = MODAL_STATE.QR_LOADING;
     const { code, data } = await getAuthorizedImage(id.value);
     if (code === 200) {
       qrCodeUrl.value = data.image;
       overdueTimer = null;
-      isOverdue.value = false;
+      modalState.value = MODAL_STATE.QR_READY;
 
       // 约定：后端限制40s内必须扫码，前端定30s后失效
       overdueTimer = setTimeout(() => {
-        isOverdue.value = true;
+        modalState.value = MODAL_STATE.QR_EXPIRED;
       }, OVERDUE_TIME);
     } else {
-      isFailLoadQrCode.value = true;
+      modalState.value = MODAL_STATE.QR_FAILED;
     }
   } catch (error) {
-    isFailLoadQrCode.value = true;
-  } finally {
-    qrCodeLoading.value = false;
+    modalState.value = MODAL_STATE.QR_FAILED;
   }
 };
 
@@ -163,22 +207,14 @@ const clearStatusPollingTimer = () => {
 const startStatusPolling = () => {
   clearStatusPollingTimer();
   statusPollingTimer = setInterval(async () => {
-    if (!isCompleted.value) {
+    if (modalState.value === MODAL_STATE.LOADING) {
       await getAuthorizedStatus();
-      if (isCompleted.value) {
-        progress.value = 1;
-        clearFakeProgressTimer();
-        clearStatusPollingTimer();
-        isLoading.value = false;
-        emits('update');
-      }
     }
   }, 2000);
 };
 
 const startLoading = async () => {
-  isLoading.value = true;
-  isCompleted.value = false;
+  modalState.value = MODAL_STATE.LOADING;
   progress.value = 0;
   startFakeProgressPolling();
   startStatusPolling();
@@ -189,10 +225,18 @@ const getAuthorizedStatus = async () => {
   if (code === 200) {
     const { status, message } = data;
     if (status !== 0) {
-      isCompleted.value = true;
-      isSuccess.value = status === 1;
-      failReason.value = status === 2 ? message : '';
-      isOverdue.value = false;
+      progress.value = 1;
+      clearFakeProgressTimer();
+      clearStatusPollingTimer();
+
+      if (status === 1) {
+        modalState.value = MODAL_STATE.SUCCESS;
+      } else {
+        modalState.value = MODAL_STATE.FAILED;
+        failReason.value = message || '';
+      }
+
+      emits('update');
     }
   }
 };
@@ -200,11 +244,11 @@ const getAuthorizedStatus = async () => {
 const startFakeProgressPolling = () => {
   clearFakeProgressTimer();
   progressTimer = setInterval(() => {
-    if (!isCompleted.value && progress.value < 0.99) {
+    if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
       const step = Math.random() * 0.04 + 0.01;
       progress.value = Math.min(progress.value + step, 0.99);
       progress.value = Number(progress.value.toFixed(2));
-    } else if (!isCompleted.value && progress.value >= 0.99) {
+    } else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
       progress.value = 0.99; // 卡在99%
     } else {
       clearFakeProgressTimer();
@@ -219,44 +263,57 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
+
 const clearOverdueTimer = () => {
   if (overdueTimer) {
     clearTimeout(overdueTimer);
     overdueTimer = null;
   }
 };
+
 // 重新扫码
 const handleRefreshQrCode = () => {
+  clearOverdueTimer();
   resetTaskFields();
   getAuthorizedQrCode();
 };
 
 const handleOk = () => {
-  if (isFailLoadQrCode.value) {
+  // 二维码已过期
+  if (modalState.value === MODAL_STATE.QR_EXPIRED) {
     handleRefreshQrCode();
     return;
   }
 
-  if (!qrCodeUrl.value) {
+  // 二维码还在加载中
+  if (modalState.value === MODAL_STATE.QR_LOADING) {
     AMessage.warning('二维码生成中，请稍等');
     return;
   }
 
-  if (isOverdue.value) {
-    AMessage.error('二维码已失效，请重新扫码');
+  // 二维码生成失败
+  if (modalState.value === MODAL_STATE.QR_FAILED) {
+    handleRefreshQrCode();
     return;
   }
 
-  if (isCompleted.value) {
-    clearOverdueTimer();
+  // 授权成功，关闭弹窗
+  if (modalState.value === MODAL_STATE.SUCCESS) {
+    close();
+    return;
+  }
 
-    if (isSuccess.value) {
-      close();
-    } else {
-      handleRefreshQrCode();
-    }
-  } else {
+  // 授权失败，重新扫码
+  if (modalState.value === MODAL_STATE.FAILED) {
+    handleRefreshQrCode();
+    return;
+  }
+
+  // 二维码就绪，开始授权流程
+  if (modalState.value === MODAL_STATE.QR_READY) {
+    clearOverdueTimer();
     startLoading();
+    return;
   }
 };
 
diff --git a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
index 5a1e18a..ced2bd0 100644
--- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/index.vue
@@ -9,56 +9,12 @@
     title="重新授权"
     modal-class="reauthorize-account-modal"
     :mask-closable="false"
-    :footer="taskStep !== TASK_STEP.loading"
+    :footer="modalState !== MODAL_STATE.LOADING"
     @close="close"
   >
     <div class="flex flex-col items-center">
-      <template v-if="taskStep === TASK_STEP.default">
-        <!-- <template v-if="hasUnsyncData">
-          <div class="flex items-center mb-20px">
-            <img :src="icon4" width="16" height="16" class="mr-16px" />
-            <span class="s2 color-#3C4043">检测到该账号最后更新日期为x月x日，已有x天未同步最新数据。</span>
-          </div>
-          <a-radio-group v-model="actionType" class="ml-32px">
-            <a-radio :value="1" class="mb-16px"
-              ><span class="s2"
-                >立即同步遗漏数据 - 获取完整的最新数据 <span class="color-#6D4CFE">（推荐）</span></span
-              ></a-radio
-            >
-            <a-radio :value="2" class="mb-16px"
-              ><span class="s2">仅授权不更新 - 继续使用当前不完全的数据</span></a-radio
-            >
-          </a-radio-group>
-        </template> -->
-        <!-- <template v-else> -->
-        <div class="img-box">
-          <template v-if="qrCodeLoading || isFailLoadQrCode">
-            <div class="relative w-160px h-160px">
-              <a-image :src="icon1" width="160" height="160" />
-              <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
-                <img v-if="isFailLoadQrCode" :src="icon4" width="24" height="24" class="mb-13px" />
-                <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
-                <span :class="isFailLoadQrCode ? '!color-#F64B31' : '!color-#6D4CFE'" class="s2">{{
-                  isFailLoadQrCode ? '二维码生成失败' : '二维码生成中...'
-                }}</span>
-              </div>
-              <div
-                class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
-              ></div>
-            </div>
-          </template>
-          <a-image v-else :src="qrCodeUrl" width="160" height="160" />
-
-          <div v-if="isOverdue" class="mask cursor-pointer" @click="handleRefreshQrCode">
-            <icon-refresh size="24" class="mb-13px" />
-            <p class="s1">二维码失效</p>
-            <p class="s1">请点击刷新</p>
-          </div>
-        </div>
-        <span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
-      </template>
-      <!-- </template> -->
-      <template v-else-if="taskStep === TASK_STEP.loading">
+      <!-- 加载中状态 -->
+      <template v-if="modalState === MODAL_STATE.LOADING">
         <a-progress
           :percent="progress"
           color="#6D4CFE"
@@ -69,41 +25,94 @@
         />
         <p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
       </template>
+
+      <!-- 完成状态 -->
       <template v-else>
-        <template v-if="isNicknameChanged">
-          <div class="flex items-center mb-20px">
-            <img :src="icon4" width="16" height="16" class="mr-16px" />
-            <span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
-          </div>
-          <div class="w-100% pl-32px">
-            <div class="account-tip-box">
-              <p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
-              <p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
+        <template v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED">
+          <template v-if="isNicknameChanged">
+            <div class="flex items-center mb-20px">
+              <img :src="icon4" width="16" height="16" class="mr-16px" />
+              <span class="s2 color-#3C4043">当前绑定的账号与之前的昵称不一致，请确认是否覆盖原账号信息。</span>
+            </div>
+            <div class="w-100% pl-32px">
+              <div class="account-tip-box">
+                <p class="mb-4px s2"><span class="color-#3C4043">原账号：</span>全球旅行小助手</p>
+                <p class="s2"><span class="color-#3C4043">当前账号：</span>环球旅行官</p>
+              </div>
+            </div>
+          </template>
+          <template v-else>
+            <img :src="modalState === MODAL_STATE.SUCCESS ? icon2 : icon3" width="80" height="80" class="mb-16px" />
+            <p class="s2">{{ `数据初始化${modalState === MODAL_STATE.SUCCESS ? '成功' : '失败'}。` }}</p>
+            <p v-if="modalState === MODAL_STATE.FAILED" class="red-text">失败原因：{{ failReason || '-' }}</p>
+          </template>
+        </template>
+
+        <!-- 二维码状态 -->
+        <template v-else>
+          <div class="img-box">
+            <!-- 二维码加载中或失败 -->
+            <template v-if="modalState === MODAL_STATE.QR_LOADING || modalState === MODAL_STATE.QR_FAILED">
+              <div class="relative w-160px h-160px">
+                <a-image :src="icon1" width="160" height="160" />
+                <div class="absolute top-0 left-0 z-2 w-full h-full flex flex-col items-center justify-center">
+                  <img
+                    v-if="modalState === MODAL_STATE.QR_FAILED"
+                    :src="icon4"
+                    width="24"
+                    height="24"
+                    class="mb-13px"
+                  />
+                  <icon-loading v-else size="24" class="color-#6D4CFE mb-13px" />
+                  <span
+                    :class="modalState === MODAL_STATE.QR_FAILED ? '!color-#F64B31' : '!color-#6D4CFE'"
+                    class="s2"
+                    >{{ modalState === MODAL_STATE.QR_FAILED ? '二维码生成失败' : '二维码生成中...' }}</span
+                  >
+                </div>
+                <div
+                  class="absolute top-0 left-0 w-full h-full flex items-center justify-center opacity-80 bg-#fff"
+                ></div>
+              </div>
+            </template>
+
+            <!-- 正常二维码 -->
+            <a-image v-else :src="qrCodeUrl" width="160" height="160" />
+
+            <!-- 二维码失效遮罩 -->
+            <div v-if="modalState === MODAL_STATE.QR_EXPIRED" class="mask cursor-pointer" @click="handleRefreshQrCode">
+              <icon-refresh size="24" class="mb-13px" />
+              <p class="s1">二维码失效</p>
+              <p class="s1">请点击刷新</p>
             </div>
           </div>
-        </template>
-        <template v-else>
-          <img :src="isSuccess ? icon2 : icon3" width="80" height="80" class="mb-16px" />
-          <p class="s2">{{ `数据初始化${isSuccess ? '成功' : '失败'}。` }}</p>
-          <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
+          <span class="mt-16px"> 请使用{{ platform }}扫码，将公司账号绑定至灵机平台。 </span>
         </template>
       </template>
     </div>
+
     <template #footer>
+      <a-button v-if="modalState === MODAL_STATE.QR_READY" size="large" class="cancel-btn" @click="handleRefreshQrCode">
+        重新生成
+      </a-button>
       <a-button
-        v-if="taskStep === TASK_STEP.default || taskStep === TASK_STEP.end"
+        v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
         size="large"
         class="cancel-btn"
         @click="close"
-        >取消</a-button
       >
-      <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
+        取消
+      </a-button>
+      <a-button type="primary" size="large" @click="handleOk">
+        {{ confirmBtnText }}
+      </a-button>
     </template>
   </a-modal>
 </template>
 
 <script setup>
-import { defineExpose, ref, onUnmounted } from 'vue';
+import { defineExpose, ref, computed } from 'vue';
+import { Message as AMessage } from '@arco-design/web-vue';
 import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
@@ -112,144 +121,148 @@ import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 import icon4 from '@/assets/img/media-account/icon-warn-1.png';
 
 const emits = defineEmits(['update']);
-const OVERDUE_TIME = 30000; // 失效时间
-const TASK_STEP = {
-  default: 1,
-  loading: 2,
-  end: 3,
+
+// 状态枚举
+const MODAL_STATE = {
+  QR_LOADING: 0, // 二维码加载中
+  QR_FAILED: 1, // 二维码生成失败
+  QR_READY: 2, // 二维码就绪，等待扫码
+  QR_EXPIRED: 3, // 二维码已过期
+  LOADING: 4, // 数据同步中
+  SUCCESS: 5, // 授权成功
+  FAILED: 6, // 授权失败
 };
+
+const OVERDUE_TIME = 30000; // 失效时间
 const visible = ref(false);
-const isOverdue = ref(false); // 二维码失效
-const isSuccess = ref(false);
+const modalState = ref(MODAL_STATE.QR_LOADING);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 const platform = ref('');
-
-const isFailLoadQrCode = ref(false);
 const qrCodeUrl = ref('');
-const qrCodeLoading = ref(false);
-
-const taskStep = ref(TASK_STEP.default);
-// const hasUnsyncData = ref(false); // 含有未同步数据
 const isNicknameChanged = ref(false); // 昵称发生变化
-const actionType = ref(1);
 
 let progressTimer = null;
 let overdueTimer = null;
 let statusPollingTimer = null;
 
+// 按钮文案映射
 const confirmBtnText = computed(() => {
-  if (isFailLoadQrCode.value) return '重新生成';
-  if (taskStep.value === TASK_STEP.default) {
-    // return hasUnsyncData.value ? '确定' : '完成扫码';
-    return '完成扫码';
-  }
-
-  if (taskStep.value === TASK_STEP.end) {
-    if (isNicknameChanged.value) return '确定覆盖';
-    return isSuccess.value ? '继续添加' : '重新扫码';
-  }
-
-  return '';
+  const btnTextMap = {
+    [MODAL_STATE.QR_LOADING]: '完成扫码',
+    [MODAL_STATE.QR_FAILED]: '重新生成',
+    [MODAL_STATE.QR_READY]: '完成扫码',
+    [MODAL_STATE.QR_EXPIRED]: '重新生成',
+    [MODAL_STATE.LOADING]: '处理中...',
+    [MODAL_STATE.SUCCESS]: isNicknameChanged.value ? '确定覆盖' : '继续添加',
+    [MODAL_STATE.FAILED]: '重新扫码',
+  };
+  return btnTextMap[modalState.value] || '确定';
 });
 
 const open = (accountId, platformCode) => {
   id.value = accountId;
   platform.value = platformCode === 0 ? '抖音' : '小红书';
+  modalState.value = MODAL_STATE.QR_LOADING;
   getAuthorizedQrCode();
   visible.value = true;
 };
+
 const resetTaskFields = () => {
-  isOverdue.value = false;
-  isSuccess.value = false;
+  modalState.value = MODAL_STATE.QR_LOADING;
   failReason.value = '';
   platform.value = '';
   progress.value = 0;
   qrCodeUrl.value = '';
-  qrCodeLoading.value = false;
   isNicknameChanged.value = false;
-  isFailLoadQrCode.value = false;
-  actionType.value = 1;
-  taskStep.value = TASK_STEP.default;
 };
+
 const close = () => {
   resetTaskFields();
   id.value = '';
   clearFakeProgressTimer();
+  clearStatusPollingTimer();
   clearOverdueTimer();
   visible.value = false;
 };
 
+const getAuthorizedQrCode = async () => {
+  try {
+    modalState.value = MODAL_STATE.QR_LOADING;
+    const { code, data } = await getAuthorizedImage(id.value);
+    if (code === 200) {
+      qrCodeUrl.value = data.image;
+      overdueTimer = null;
+      modalState.value = MODAL_STATE.QR_READY;
+
+      // 约定：后端限制40s内必须扫码，前端定30s后失效
+      overdueTimer = setTimeout(() => {
+        modalState.value = MODAL_STATE.QR_EXPIRED;
+      }, OVERDUE_TIME);
+    } else {
+      modalState.value = MODAL_STATE.QR_FAILED;
+    }
+  } catch (error) {
+    modalState.value = MODAL_STATE.QR_FAILED;
+  }
+};
+
+const clearStatusPollingTimer = () => {
+  if (statusPollingTimer) {
+    clearInterval(statusPollingTimer);
+    statusPollingTimer = null;
+  }
+};
+
+const startStatusPolling = () => {
+  clearStatusPollingTimer();
+  statusPollingTimer = setInterval(async () => {
+    if (modalState.value === MODAL_STATE.LOADING) {
+      await getAuthorizedStatus();
+    }
+  }, 2000);
+};
+
+const startLoading = async () => {
+  modalState.value = MODAL_STATE.LOADING;
+  progress.value = 0;
+  startFakeProgressPolling();
+  startStatusPolling();
+};
+
 const getAuthorizedStatus = async () => {
   const { code, data } = await getMediaAccountsAuthorizedStatus(id.value);
   if (code === 200) {
     const { status, message } = data;
     if (status !== 0) {
-      taskStep.value = TASK_STEP.end;
-      isSuccess.value = status === 1;
-      failReason.value = status === 2 ? message : '';
-      isOverdue.value = false;
-    }
-  }
-};
+      progress.value = 1;
+      clearFakeProgressTimer();
+      clearStatusPollingTimer();
 
-const startStatusPolling = () => {
-  clearStatusPollingTimer();
-  statusPollingTimer = setInterval(async () => {
-    if (taskStep.value === TASK_STEP.loading) {
-      await getAuthorizedStatus();
-      if (taskStep.value === TASK_STEP.end) {
-        progress.value = 1;
-        clearFakeProgressTimer();
-        clearStatusPollingTimer();
-        emits('update');
+      if (status === 1) {
+        modalState.value = MODAL_STATE.SUCCESS;
+        // 这里可以根据实际业务逻辑判断是否需要显示昵称变更提示
+        // isNicknameChanged.value = true; // 示例：如果需要显示昵称变更
+      } else {
+        modalState.value = MODAL_STATE.FAILED;
+        failReason.value = message || '';
       }
-    }
-  }, 2000);
-};
 
-const getAuthorizedQrCode = async () => {
-  try {
-    qrCodeLoading.value = true;
-    const { code, data } = await getAuthorizedImage(id.value);
-    if (code === 200) {
-      qrCodeUrl.value = data.image;
-      overdueTimer = null;
-      isOverdue.value = false;
-
-      // 约定：后端限制40s内必须扫码，前端定30s后失效
-      overdueTimer = setTimeout(() => {
-        isOverdue.value = true;
-      }, OVERDUE_TIME);
-    } else {
-      isFailLoadQrCode.value = true;
+      emits('update');
     }
-  } catch (error) {
-    isFailLoadQrCode.value = true;
-  } finally {
-    qrCodeLoading.value = false;
   }
 };
 
-const startLoading = async () => {
-  taskStep.value = TASK_STEP.loading;
-  progress.value = 0;
-  startFakeProgressPolling();
-  startStatusPolling();
-};
-
 const startFakeProgressPolling = () => {
   clearFakeProgressTimer();
   progressTimer = setInterval(() => {
-    if (taskStep.value === TASK_STEP.loading) {
-      if (progress.value < 0.99) {
-        const step = Math.random() * 0.04 + 0.01;
-        progress.value = Math.min(progress.value + step, 0.99);
-        progress.value = Number(progress.value.toFixed(2));
-      } else if (progress.value >= 0.99) {
-        progress.value = 0.99; // 卡在99%
-      }
+    if (modalState.value === MODAL_STATE.LOADING && progress.value < 0.99) {
+      const step = Math.random() * 0.04 + 0.01;
+      progress.value = Math.min(progress.value + step, 0.99);
+      progress.value = Number(progress.value.toFixed(2));
+    } else if (modalState.value === MODAL_STATE.LOADING && progress.value >= 0.99) {
+      progress.value = 0.99; // 卡在99%
     } else {
       clearFakeProgressTimer();
       clearStatusPollingTimer();
@@ -263,6 +276,7 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
+
 const clearOverdueTimer = () => {
   if (overdueTimer) {
     clearTimeout(overdueTimer);
@@ -270,52 +284,56 @@ const clearOverdueTimer = () => {
   }
 };
 
-const clearStatusPollingTimer = () => {
-  if (statusPollingTimer) {
-    clearInterval(statusPollingTimer);
-    statusPollingTimer = null;
-  }
-};
-
 // 重新扫码
 const handleRefreshQrCode = () => {
+  clearOverdueTimer();
   resetTaskFields();
   getAuthorizedQrCode();
 };
 
 const handleOk = () => {
-  if (taskStep.value === TASK_STEP.default) {
-    if (isFailLoadQrCode.value) {
-      handleRefreshQrCode();
-      return;
-    }
-
-    clearOverdueTimer();
-
-    if (!qrCodeUrl.value) {
-      AMessage.warning('二维码生成中，请稍等');
-      return;
-    }
-    if (isOverdue.value) {
-      AMessage.error('二维码已失效，请重新扫码');
-      return;
-    }
-
-    startLoading();
+  // 二维码已过期
+  if (modalState.value === MODAL_STATE.QR_EXPIRED) {
+    AMessage.error('二维码已失效，请重新扫码');
+    handleRefreshQrCode();
     return;
   }
 
-  if (taskStep.value === TASK_STEP.end) {
+  // 二维码还在加载中
+  if (modalState.value === MODAL_STATE.QR_LOADING) {
+    AMessage.warning('二维码生成中，请稍等');
+    return;
+  }
+
+  // 二维码生成失败
+  if (modalState.value === MODAL_STATE.QR_FAILED) {
+    handleRefreshQrCode();
+    return;
+  }
+
+  // 授权成功
+  if (modalState.value === MODAL_STATE.SUCCESS) {
     if (isNicknameChanged.value) {
       isNicknameChanged.value = false;
       console.log('确定覆盖');
+      // 这里可以添加覆盖逻辑
     } else {
-      if (isSuccess.value) {
-        close();
-      } else {
-        handleRefreshQrCode();
-      }
+      close();
     }
+    return;
+  }
+
+  // 授权失败，重新扫码
+  if (modalState.value === MODAL_STATE.FAILED) {
+    handleRefreshQrCode();
+    return;
+  }
+
+  // 二维码就绪，开始授权流程
+  if (modalState.value === MODAL_STATE.QR_READY) {
+    clearOverdueTimer();
+    startLoading();
+    return;
   }
 };
 

From aef2d5f31050329c1043e6fe5b2e7f5fecf8de59 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Fri, 11 Jul 2025 14:57:23 +0800
Subject: [PATCH 2/3] =?UTF-8?q?perf:=20=E5=8E=BB=E6=8E=89=E5=AD=97?=
 =?UTF-8?q?=E4=BD=93=E5=BC=95=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/font.scss | 50 ++++++++++++++++++++++----------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/styles/font.scss b/src/styles/font.scss
index ea0f7c1..7c9c86e 100644
--- a/src/styles/font.scss
+++ b/src/styles/font.scss
@@ -1,30 +1,30 @@
-@font-face {
-  font-family: 'PuHuiTi-Regular';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.woff2') format('woff2');
-  font-display: swap;
-}
+// @font-face {
+//   font-family: 'PuHuiTi-Regular';
+//   src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.woff2') format('woff2');
+//   font-display: swap;
+// }
 
-@font-face {
-  font-family: 'PuHuiTi-Medium';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.woff2') format('woff2');
-  font-display: swap;
-}
+// @font-face {
+//   font-family: 'PuHuiTi-Medium';
+//   src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.woff2') format('woff2');
+//   font-display: swap;
+// }
 
-@font-face {
-  font-family: 'PuHuiTi-Bold';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Bold.woff2') format('woff2');
-  font-display: swap;
-}
+// @font-face {
+//   font-family: 'PuHuiTi-Bold';
+//   src: url('@/assets/fonts/Alibaba-PuHuiTi-Bold.woff2') format('woff2');
+//   font-display: swap;
+// }
 
-// 使用统一的字体族名
-.font-family-puhui-regular {
-  font-family: 'PuHuiTi-Regular' !important;
-}
+// // 使用统一的字体族名
+// .font-family-puhui-regular {
+//   font-family: 'PuHuiTi-Regular' !important;
+// }
 
-.font-family-puhui-medium {
-  font-family: 'PuHuiTi-Medium' !important;
-}
+// .font-family-puhui-medium {
+//   font-family: 'PuHuiTi-Medium' !important;
+// }
 
-.font-family-puhui-bold {
-  font-family: 'PuHuiTi-Bold' !important;
-}
+// .font-family-puhui-bold {
+//   font-family: 'PuHuiTi-Bold' !important;
+// }

From 2fc1f64f5e6eaee19bae3763eba0e56aa48e6a0b Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Fri, 11 Jul 2025 15:25:36 +0800
Subject: [PATCH 3/3] =?UTF-8?q?perf:=20=E5=AA=92=E4=BD=93=E8=B4=A6?=
 =?UTF-8?q?=E6=88=B7=E5=81=A5=E5=BA=B7=E7=8A=B6=E6=80=81=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../media-account/account-manage/index.vue             | 10 ++++++----
 .../put-account/account-manage/index.vue               | 10 ++++++----
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/views/property-marketing/media-account/account-manage/index.vue b/src/views/property-marketing/media-account/account-manage/index.vue
index 2a383fc..74753a7 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -146,7 +146,7 @@ const dataSource = ref([]);
 const selectedItems = ref([]);
 const healthData = ref({});
 
-const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
+const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
@@ -159,23 +159,25 @@ const tipLabel = computed(() => {
   }
 
   const {
-    abnormal_number = 0,
+    total_abnormal_number = 0,
     login_invalid_number = 0,
     too_many_requests_number = 0,
     account_frozen_number = 0,
+    miss_data_number = 0,
   } = healthData.value;
 
   // 定义异常类型映射
   const abnormalTypes = [
     { count: login_invalid_number, label: 'cookie过期' },
-    { count: too_many_requests_number, label: '已请求频繁' },
+    { count: too_many_requests_number, label: '请求频繁' },
     { count: account_frozen_number, label: '账号被封' },
+    { count: miss_data_number, label: '数据缺失' },
   ];
 
   // 过滤出有异常的项并格式化
   const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
 
-  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+  return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
 onMounted(() => {
diff --git a/src/views/property-marketing/put-account/account-manage/index.vue b/src/views/property-marketing/put-account/account-manage/index.vue
index da35605..d0b4a33 100644
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@@ -122,7 +122,7 @@ const dataSource = ref([]);
 const selectedItems = ref([]);
 const healthData = ref({});
 
-const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
+const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
@@ -135,23 +135,25 @@ const tipLabel = computed(() => {
   }
 
   const {
-    abnormal_number = 0,
+    total_abnormal_number = 0,
     login_invalid_number = 0,
     too_many_requests_number = 0,
     account_frozen_number = 0,
+    miss_data_number = 0,
   } = healthData.value;
 
   // 定义异常类型映射
   const abnormalTypes = [
     { count: login_invalid_number, label: 'cookie过期' },
-    { count: too_many_requests_number, label: '已请求频繁' },
+    { count: too_many_requests_number, label: '请求频繁' },
     { count: account_frozen_number, label: '账号被封' },
+    { count: miss_data_number, label: '数据缺失' },
   ];
 
   // 过滤出有异常的项并格式化
   const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
 
-  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+  return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
 onMounted(() => {