feat: 账号健康状态、统一组件逻辑

src/views/property-marketing/media-account/account-manage/index.vue

@@ -32,8 +32,9 @@
     </div>
 
     <div
+      v-if="dataSource.length > 0"
       class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
+      :class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
     >
       <div class="flex items-center">
         <div class="flex items-center">
@@ -55,14 +56,8 @@
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
           </template>
           <template v-else>
-            <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
-            <span class="label">
-              {{
-                isNormalStatus
-                  ? '太棒啦！所有账号都在正常运行。'
-                  : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
-              }}
-            </span>
+            <img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
+            <span class="label"> {{ tipLabel }} </span>
           </template>
         </div>
       </div>
@@ -71,7 +66,7 @@
         <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
       </template>
       <div v-else>
-        <a-space v-if="isAbnormalStatus" class="flex items-center">
+        <a-space v-if="isAbNormalStatus" class="flex items-center">
           <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
             <template #default>查看异常账号</template>
           </a-button>
@@ -126,7 +121,7 @@ import BatchTagModal from './components/batch-tag-modal';
 import BatchGroupModal from './components/batch-group-modal';
 
 import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
-import { getMediaAccounts } from '@/api/all/propertyMarketing';
+import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon2 from '@/assets/img/media-account/icon-group.png';
@@ -143,24 +138,61 @@ const batchTagModalRef = ref(null);
 const batchGroupModalRef = ref(null);
 const filterBlockRef = ref(null);
 
-const tipStatus = ref(2);
 const pageInfo = ref(cloneDeep(INITIAL_PAGE_INFO));
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
+const healthData = ref({});
+
+const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
 
-const isNormalStatus = computed(() => tipStatus.value === 1);
-const isAbnormalStatus = computed(() => tipStatus.value === 2);
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
   () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
 );
 
+const tipLabel = computed(() => {
+  if (!isAbNormalStatus.value) {
+    return '太棒啦！所有账号都在正常运行。';
+  }
+
+  const {
+    abnormal_number = 0,
+    login_invalid_number = 0,
+    too_many_requests_number = 0,
+    account_frozen_number = 0,
+  } = healthData.value;
+
+  // 定义异常类型映射
+  const abnormalTypes = [
+    { count: login_invalid_number, label: 'cookie过期' },
+    { count: too_many_requests_number, label: '已请求频繁' },
+    { count: account_frozen_number, label: '账号被封' },
+  ];
+
+  // 过滤出有异常的项并格式化
+  const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
+
+  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
+});
+
 onMounted(() => {
   getData();
 });
 
-const getData = async () => {
+const getData = () => {
+  getHealthData();
+  getAccountData();
+};
+
+const getHealthData = async () => {
+  const { code, data } = await getMediaAccountsHealth();
+  if (code === 200) {
+    healthData.value = data;
+    console.log(healthData.value);
+  }
+};
+const getAccountData = async () => {
   const { page, pageSize } = pageInfo.value;
   const { code, data } = await getMediaAccounts({
     page,
@@ -217,12 +249,12 @@ const handleChangeAll = (checked) => {
 };
 const handleBatchDelete = () => {
   const ids = selectedItems.value.map((item) => item.id);
-  const names = selectedItems.value.map((item) => `“${item.name || '-'}”`).join('，');
+  const names = selectedItems.value.map((item) => `"${item.name || '-'}"`).join('，');
   deleteAccountRef.value?.open({ id: ids, name: names });
 };
 const handleDelete = (item) => {
   const { id, name } = item;
-  deleteAccountRef.value?.open({ id, name: `“${name || '-'}”` });
+  deleteAccountRef.value?.open({ id, name: `"${name || '-'}"` });
 };
 const handleCloseTip = () => {
   selectedItems.value = [];