From aa176fd2b405dea27dcc5ab1ba04a1e7451e9d92 Mon Sep 17 00:00:00 2001
From: rd <1344903914@qq.com>
Date: Mon, 14 Jul 2025 17:30:59 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=90=8C=E6=AD=A5=E6=95=B0=E6=8D=AEloa?=
 =?UTF-8?q?ding?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/account-info/index.vue         |  3 +-
 .../media-account/account-detail/index.vue    |  2 +-
 .../components/account-table/index.vue        | 36 +++++++++++++++----
 .../components/sync-data-modal/index.vue      |  4 +--
 .../media-account/account-manage/index.vue    |  5 +++
 .../put-account/account-manage/index.vue      |  2 ++
 6 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
index 5b3d2a6..457f04a 100644
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
@@ -122,7 +122,8 @@ import icon4 from '@/assets/img/media-account/icon-success.png';
 
 const route = useRoute();
 const id = route.params.id;
-const dateType = route.query.type;
+const dateType = route.query.type ?? 'week';
+
 const detailData = ref({});
 const showMore = ref(false);
 
diff --git a/src/views/property-marketing/media-account/account-detail/index.vue b/src/views/property-marketing/media-account/account-detail/index.vue
index c627029..cdefb38 100644
--- a/src/views/property-marketing/media-account/account-detail/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/index.vue
@@ -21,7 +21,7 @@ import { useRouter } from 'vue-router';
 const router = useRouter();
 
 const handleBack = () => {
-  router.push('/media-account/dashboard');
+  router.go(-1);
 };
 </script>
 
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
index 775e625..9f13f9f 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/index.vue
@@ -4,17 +4,24 @@
 -->
 <template>
   <div class="card-container">
-    <div
+    <!-- <a-spin class="w-100% h-100%"> -->
+
+    <a-spin
       v-for="(item, index) in dataSource"
       :key="index"
+      :loading="isSyncing(item)"
+      tip="更新数据中..."
       class="card-item"
       :class="{
         checked: isSelected(item),
       }"
     >
+      <template #icon>
+        <icon-sync size="24" />
+      </template>
       <a-checkbox :model-value="isSelected(item)" :value="item.id" @change="toggleSelect(item)"></a-checkbox>
       <div class="ml-8px flex-1">
-        <p class="name">{{ item.name || '-' }}</p>
+        <p class="name cursor-pointer" @click="goDetail(item)">{{ item.name || '-' }}</p>
         <div class="field-row">
           <span class="label">状态</span>
           <StatusBox :status="item.status" />
@@ -108,7 +115,8 @@
           </a-button> -->
         </div>
       </div>
-    </div>
+    </a-spin>
+    <!-- </div> -->
     <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
     <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
     <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@@ -117,6 +125,7 @@
 
 <script setup>
 import { defineProps, ref, computed, inject } from 'vue';
+import { useRouter } from 'vue-router';
 import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
 
 import PauseAccountPatchModal from './pause-account-patch';
@@ -133,6 +142,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  syncMediaAccounts: {
+    type: Array,
+    default: () => [],
+  },
   selectedItems: {
     type: Array,
     default: () => [],
@@ -141,6 +154,8 @@ const props = defineProps({
 
 const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
 
+const router = useRouter();
+
 const pauseAccountPatchModalRef = ref(null);
 const reauthorizeAccountModalRef = ref(null);
 const authorizedAccountModalRef = ref(null);
@@ -159,6 +174,12 @@ const toggleSelect = (item) => {
   }
   emits('selectionChange', newSelected);
 };
+const isSyncing = (item) => {
+  if (!props.selectedItems.length) return false;
+
+  const target = props.selectedItems.find((v) => v.id === item.id);
+  return target.status === 0;
+};
 
 const openEdit = (item) => {
   emits('openEdit', item);
@@ -169,7 +190,6 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  console.log({ item });
   const { id, platform, status } = item;
   const isUnauthorized = isUnauthorizedStatus(status);
   if (isUnauthorized) {
@@ -207,11 +227,11 @@ const getTooltipText = (status) => {
   return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
 };
 
-const handleSyncData = inject('handleSyncData');
+const syncData = inject('handleSyncData');
 
 const onBtnClick = (item) => {
   if (showSyncDataButton(item.status)) {
-    handleSyncData && handleSyncData(item);
+    syncData(item);
     return;
   }
   if (isUnauthorizedStatus(item.status)) {
@@ -242,6 +262,10 @@ const getBtnText = (item) => {
 
   return '暂停同步';
 };
+
+const goDetail = (item) => {
+  router.push(`/media-account/detail/${item.id}`);
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
index edc9243..f86ddaf 100644
--- a/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue
@@ -31,7 +31,7 @@ import { defineExpose } from 'vue';
 
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 
-const handleSyncData = inject('handleSyncData');
+const syncData = inject('handleSyncData');
 
 const id = ref('');
 
@@ -45,7 +45,7 @@ const close = () => {
   visible.value = false;
 };
 const handleOk = () => {
-  handleSyncData({ id: id.value });
+  syncData({ id: id.value });
   close();
 };
 defineExpose({
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 1597af3..fa0c62d 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -79,6 +79,7 @@
     <div class="card-wrap">
       <AccountTable
         v-if="dataSource.length > 0"
+        :syncMediaAccounts="syncMediaAccounts"
         :dataSource="dataSource"
         :selectedItems="selectedItems"
         @selectionChange="handleSelectionChange"
@@ -159,6 +160,7 @@ const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
 const healthData = ref({});
+const syncMediaAccounts = ref([]);
 const startSyncData = ref(false);
 
 const isAbNormalStatus = computed(() => healthData.value?.total_abnormal_number > 0);
@@ -180,6 +182,7 @@ const tipLabel = computed(() => {
     too_many_requests_number = 0,
     account_frozen_number = 0,
     miss_data_number = 0,
+    abnormal_number = 0,
   } = healthData.value;
 
   // 定义异常类型映射
@@ -188,6 +191,7 @@ const tipLabel = computed(() => {
     { count: too_many_requests_number, label: '请求频繁' },
     { count: account_frozen_number, label: '账号被封' },
     { count: miss_data_number, label: '数据缺失' },
+    { count: abnormal_number, label: '其他异常' },
   ];
 
   // 过滤出有异常的项并格式化
@@ -281,6 +285,7 @@ const startSyncDataPolling = () => {
   syncDataTimer = setInterval(async () => {
     const { code, data } = await getMediaAccountSyncStatus();
     if (code === 200) {
+      syncMediaAccounts.value = data;
       // 所有任务都结束了，才停止轮询，刷新页面
       const isEnd = data.every((item) => item.status !== 0);
       if (isEnd) {
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 4c03708..8554862 100644
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@@ -141,6 +141,7 @@ const tipLabel = computed(() => {
     too_many_requests_number = 0,
     account_frozen_number = 0,
     miss_data_number = 0,
+    abnormal_number = 0,
   } = healthData.value;
 
   // 定义异常类型映射
@@ -149,6 +150,7 @@ const tipLabel = computed(() => {
     { count: too_many_requests_number, label: '请求频繁' },
     { count: account_frozen_number, label: '账号被封' },
     { count: miss_data_number, label: '数据缺失' },
+    { count: abnormal_number, label: '其他异常' },
   ];
 
   // 过滤出有异常的项并格式化