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

src/views/property-marketing/put-account/account-manage/components/account-table/index.vue

@@ -70,7 +70,9 @@
 
 <script setup>
 import { defineProps, ref, computed } from 'vue';
-import { STATUS_LIST, EnumStatus, PLATFORM_LIST } from '../../constants';
+import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
+
 import { formatNumberShow } from '@/utils/tools';
 
 import PauseAccountPatchModal from './pause-account-patch';

src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue

@@ -140,7 +140,7 @@ import { ref, defineEmits } from 'vue';
 import AuthorizedAccountModal from '../authorized-account-modal';
 // import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
-import { PLATFORM_LIST } from '../../constants';
+import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
 
 import {
   postPlacementAccounts,

src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue

@@ -26,11 +26,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">状态</span>
         <a-space class="w-180px">
-          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
-              item.text
-            }}</a-option>
-          </a-select>
+          <StatusSelect v-model="query.status" @change="handleSearch" />
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
@@ -46,11 +42,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
-              item.name
-            }}</a-option>
-          </a-select>
+          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
         </a-space>
       </div>
     </div>
@@ -73,8 +65,10 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-import { fetchPlacementAccountOperators } from '@/api/all/propertyMarketing';
-import { PLATFORM_LIST, STATUS_LIST } from '@/views/property-marketing/put-account/account-manage/constants';
+import { getPlacementAccountOperators } from '@/api/all/propertyMarketing';
+import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
+import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
 
 const props = defineProps({
   query: {
@@ -95,7 +89,7 @@ const handleReset = () => {
   emits('onReset');
 };
 const getOperators = async () => {
-  const { code, data } = await fetchPlacementAccountOperators();
+  const { code, data } = await getPlacementAccountOperators();
   if (code === 200) {
     operators.value = data;
   }

src/views/property-marketing/put-account/account-manage/components/status-box/index.vue

@@ -13,7 +13,7 @@
 
 <script setup>
 import { computed } from 'vue';
-import { STATUS_LIST, EnumStatus } from '../../constants';
+import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/put-account/components/status-select/constants';
 
 import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
 import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';

src/views/property-marketing/put-account/account-manage/constants.ts

@@ -2,9 +2,6 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-25 15:24:59
  */
-import icon1 from '@/assets/img/media-account/icon-jl.png';
-import icon2 from '@/assets/img/media-account/icon-jg.png';
-import icon3 from '@/assets/img/media-account/icon-bili.png';
 
 export const INITIAL_QUERY = {
   search: '',
@@ -12,78 +9,3 @@ export const INITIAL_QUERY = {
   platform: '',
   operator_id: '',
 };
-
-export const PLATFORM_LIST = [
-  {
-    label: '巨量',
-    value: 0,
-    icon: icon1,
-  },
-  {
-    label: '聚光',
-    value: 1,
-    icon: icon2,
-  },
-  {
-    label: 'B站',
-    value: 2,
-    icon: icon3,
-  },
-];
-
-export enum EnumStatus {
-  UNAUTHORIZED = 0,
-  NORMAL = 1,
-  PAUSE = 2,
-  ABNORMAL = 3,
-  ABNORMAL_LOGIN = 4,
-  ABNORMAL_REQUEST = 5,
-  ABNORMAL_FREEZE = 6,
-  ABNORMAL_MISSING = 7,
-}
-
-export const STATUS_LIST = [
-  {
-    text: '正常',
-    label: '正常',
-    value: EnumStatus.NORMAL,
-  },
-  {
-    text: '暂停同步',
-    label: '暂停同步',
-    value: EnumStatus.PAUSE,
-  },
-  {
-    text: '未授权',
-    label: '未授权',
-    value: EnumStatus.UNAUTHORIZED,
-  },
-  {
-    text: '异常',
-    label: '异常',
-    value: EnumStatus.ABNORMAL,
-  },
-  {
-    text: '异常-登录状态失效',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_LOGIN,
-    tooltip: '登录状态失效，需重新扫码授权',
-  },
-  {
-    text: '异常-请求过于频繁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_REQUEST,
-    tooltip: '请求过于频繁，需等待24小时后重试',
-  },
-  {
-    text: '异常-账号被冻结/封禁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_FREEZE,
-    tooltip: '账号被冻结/封禁',
-  },
-  {
-    text: '数据缺失',
-    label: '数据缺失',
-    value: EnumStatus.ABNORMAL_MISSING,
-  },
-];

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

@@ -22,7 +22,7 @@
     <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' : 'normal'"
+      :class="selectedItems.length > 0 ? 'selected' : isAbNormalStatus ? 'abnormal' : 'normal'"
     >
       <div class="flex items-center">
         <div class="flex items-center">
@@ -42,8 +42,8 @@
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
           </template>
           <template v-else>
-            <img :src="icon4" width="16" height="16" class="mr-8px" />
-            <span class="label"> 太棒啦！所有账号都在正常运行。 </span>
+            <img :src="isAbNormalStatus ? icon5 : icon4" width="16" height="16" class="mr-8px" />
+            <span class="label"> {{ tipLabel }} </span>
           </template>
         </div>
       </div>
@@ -51,6 +51,13 @@
       <template v-if="selectedItems.length > 0">
         <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-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
+            <template #default>查看异常账号</template>
+          </a-button>
+        </a-space>
+      </div>
     </div>
     <div class="card-wrap">
       <AccountTable
@@ -93,7 +100,7 @@ import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 
 import { INITIAL_QUERY } from './constants';
-import { getPlacementAccounts } from '@/api/all/propertyMarketing';
+import { getPlacementAccounts, getPlacementAccountsHealth } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
@@ -113,17 +120,57 @@ const pageInfo = ref({
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
+const healthData = ref({});
+
+const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
 
 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, total } = await getPlacementAccounts({
     page,
@@ -202,6 +249,10 @@ const onDeleteSuccess = (ids) => {
   selectedItems.value = selectedItems.value.filter((item) => !ids.includes(item.id));
   getData();
 };
+const handleOpenAbnormalAccount = () => {
+  query.value.status = 2;
+  reload();
+};
 </script>
 
 <style scoped lang="scss">