Merge pull request 'feature/0714_同步媒体账号数据_rxd' (#10) from feature/0714_同步媒体账号数据_rxd into main

Reviewed-on: ai-team/lingji-work-fe#10

.eslintrc.cjs

@@ -28,6 +28,14 @@ module.exports = {
       tsx: '@typescript-eslint/parser',
     },
   },
+  babelOptions: {
+    presets: [
+      '@babel/preset-env'
+    ],
+    plugins: [
+      '@vue/babel-plugin-jsx'
+    ]
+  },
   rules: {
     '@typescript-eslint/prefer-optional-chain': 'off',
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

src/api/all/propertyMarketing.ts

@@ -341,3 +341,23 @@ export const postSubAccount = (params = {}) => {
 export const postAddSubAccount = (params = {}) => {
   return Http.post('/v1/placement-accounts/subaccount', params);
 };
+
+// 媒体账号-同步数据
+export const postSyncMediaAccountData = (id: string) => {
+  return Http.post(`/v1/media-accounts/${id}/sync-data`);
+};
+
+// 媒体账号-批量同步数据
+export const postBatchSyncMediaAccountData = (params: {}) => {
+  return Http.post(`/v1/media-accounts/batch-sync-data`, params);
+};
+
+// 媒体账号-查询同步状态
+export const getMediaAccountSyncStatus = (params = {}) => {
+  return Http.get('/v1/media-accounts/sync-status', params);
+};
+
+// 媒体账号-移除同步状态
+export const deleteSyncStatus = (id: string) => {
+  return Http.delete(`/v1/media-accounts/${id}/sync-status`);
+};

src/styles/components/date-picker.scss

@@ -12,4 +12,7 @@
     border-color: rgb(var(--primary-6)) !important;
     box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
   }
+  &.arco-picker-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
 }

src/styles/components/input.scss

@@ -12,4 +12,7 @@
     border-color: rgb(var(--primary-6)) !important;
     box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
   }
+  &.arco-input-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
 }

src/styles/components/select.scss

@@ -12,4 +12,7 @@
     border-color: rgb(var(--primary-6)) !important;
     box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
   }
+  &.arco-select-view-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
 }

src/styles/components/textarea.scss

@@ -12,4 +12,7 @@
     border-color: rgb(var(--primary-6)) !important;
     box-shadow: 0 0 0 0 var(--color-primary-light-2) !important;
   }
+  &.arco-textarea-disabled {
+    background-color: var(--BG-200, #F2F3F5) !important;
+  }
 }

src/utils/tools.ts

@@ -3,6 +3,7 @@
  * @Date: 2025-06-27 17:36:31
  */
 import dayjs from 'dayjs';
+
 export function toFixed(num: number | string, n: number): number {
   return parseFloat(parseFloat(num.toString()).toFixed(n));
 }

src/views/components/dataEngine/userPersona.vue

@@ -18,16 +18,16 @@
             <a-space>
               <span style="width: 8px; height: 8px; background-color: #f64b31; border-radius: 50%"></span>
               <span>女性</span>
-              <span v-if="genderData.length > 0" style="width: 40px">{{ genderData[0].rate * 100 }}%</span>
+              <span>{{ (girlData.rate * 100).toFixed(2) }}%</span>
               <span>TGI</span>
-              <span v-if="genderData.length > 0">{{ genderData[0].tgi }}</span>
+              <span>{{ girlData.tgi }}</span>
             </a-space>
             <a-space>
               <span style="width: 8px; height: 8px; background-color: #2a59f3; border-radius: 50%"></span>
               <span>男性</span>
-              <span v-if="genderData.length > 1" style="width: 40px">{{ genderData[1].rate * 100 }}%</span>
+              <span>{{ (boyData.rate * 100).toFixed(2) }}%</span>
               <span>TGI</span>
-              <span v-if="genderData.length > 1">{{ genderData[1].tgi }}</span>
+              <span>{{ boyData.tgi }}</span>
             </a-space>
           </a-space>
         </a-space>
@@ -145,10 +145,13 @@ const topHeaderRef = ref();
 const selectedIndustry = computed(() => topHeaderRef.value?.selectedIndustry);
 const selectedSubCategory = computed(() => topHeaderRef.value?.selectedSubCategory);
 const selectedTimePeriod = computed(() => topHeaderRef.value?.selectedTimePeriod);
+
 const genderData = ref([]);
 const genderValueData = ref([]);
 const ageValueData = ref([]);
 const geoList = ref([]);
+const boyData = computed(() => genderData.value.find( v => v.gender === 1) ?? {})
+const girlData = computed(() => genderData.value.find( v => v.gender === 2) ?? {})
 // 监听筛选条件变化
 watch([selectedIndustry, selectedTimePeriod, selectedSubCategory], () => {
   getAgeDistributionsList();
@@ -233,7 +236,7 @@ const getGenderDistributionsList = async () => {
     await nextTick();
 
     genderValueData.value = data.map((item) => ({
-      value: item.rate * 100,
+      value: (item.rate * 100).toFixed(2),
       tgi: item.tgi,
       name: item.gender === 1 ? '女性' : '男性',
     }));

src/views/property-marketing/media-account/account-detail/components/account-info/index.vue

@@ -8,14 +8,11 @@
       <span class="cts !text-18px !lh-26px title">账号信息</span>
     </div>
     <div class="account-info-box">
-      <div
+      <div class="grid grid-cols-4">
-        v-for="(row, rowIdx) in getAccountInfoFields(dateType, showMore)"
-        :key="rowIdx"
-        class="grid grid-cols-4 mb-24px"
-      >
         <div
-          v-for="(field, colIdx) in row"
+          v-for="(field, colIdx) in getAccountInfoFields(dateType, showMore)"
           :key="colIdx"
+          class="mb-24px"
           :class="field.dataIndex === 'ai_evaluation' ? 'col-span-2' : ''"
         >
           <template v-if="field.dataIndex === 'ai_evaluation'">
@@ -62,6 +59,28 @@
                   }}</span>
                 </div>
               </template>
+              <template v-else-if="field.dataIndex === 'tags'">
+                <div v-if="detailData.tags?.length" class="flex items-center">
+                  <div v-for="(tag, index) in detailData.tags.slice(0, 2)" :key="index" class="tag-box">
+                    <span class="text">{{ tag.name }}</span>
+                  </div>
+                  <a-tooltip
+                    v-if="detailData.tags.length > 2"
+                    position="top"
+                    :content="
+                      detailData.tags
+                        .slice(2)
+                        .map((v) => v.name)
+                        .join(',')
+                    "
+                  >
+                    <div class="tag-box">
+                      <span class="text">{{ `+${detailData.tags.length - 2}` }}</span>
+                    </div>
+                  </a-tooltip>
+                </div>
+                <span class="cts" v-else>-</span>
+              </template>
               <template v-else-if="field.dataIndex === 'like_collect_number'">
                 {{
                   formatNumberShow({
@@ -72,6 +91,12 @@
                   })
                 }}
               </template>
+              <template v-else-if="field.dataIndex === 'platform'">
+                <img :src="detailData.platform === 0 ? icon5 : icon6" width="16" height="16" />
+              </template>
+              <template v-else-if="field.dataIndex === 'last_synced_at'">
+                {{ exactFormatTime(detailData.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss') }}
+              </template>
               <!-- 环比字段特殊渲染 -->
               <template v-else-if="field.isRateField">
                 <div
@@ -83,6 +108,9 @@
                   {{ `${detailData[field.dataIndex]}%` }}
                 </div>
               </template>
+              <template v-else-if="field.dataIndex === 'id'">
+                {{ detailData.id }}
+              </template>
               <template v-else>
                 {{ formatTableField(field, detailData, true) }}
               </template>
@@ -108,7 +136,7 @@
 <script setup>
 import { useRoute } from 'vue-router';
 
-import { formatTableField, formatNumberShow } from '@/utils/tools';
+import { formatTableField, formatNumberShow, exactFormatTime } from '@/utils/tools';
 import { getAccountInfoFields } from '../../constants';
 import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
 import { getPropPrefix } from '@/views/property-marketing/media-account/account-dashboard/constants';
@@ -119,10 +147,13 @@ import icon1 from '@/assets/img/media-account/icon5.png';
 import icon2 from '@/assets/img/media-account/icon-warn.png';
 import icon3 from '@/assets/img/media-account/icon-warn-1.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
+import icon5 from '@/assets/img/media-account/icon-dy.png';
+import icon6 from '@/assets/img/media-account/icon-xhs.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);
 

src/views/property-marketing/media-account/account-detail/components/account-info/style.scss

@@ -1,4 +1,9 @@
 .account-info-wrap {
+  @mixin ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
   position: relative;
   .status-tag {
     width: fit-content;
@@ -38,4 +43,25 @@
       }
     }
   }
+  .tag-box {
+    display: flex;
+    height: 20px;
+    padding: 0px 4px;
+    align-items: center;
+    border-radius: 2px;
+    background: var(--BG-200, #f2f3f5);
+    max-width: 100px;
+    .text {
+      @include ellipsis();
+      color: var(--Text-2, #3c4043);
+      font-family: $font-family-medium;
+      font-size: 10px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: normal;
+    }
+    &:not(:last-child) {
+      margin-right: 4px;
+    }
+  }
 }

src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts

@@ -70,12 +70,12 @@ export const TABLE_COLUMNS = [
     align: 'right',
   },
 
-  {
+  // {
-    title: '封面点击率',
+  //   title: '封面点击率',
-    dataIndex: 'cover_click_rate',
+  //   dataIndex: 'cover_click_rate',
-    width: 180,
+  //   width: 180,
-    tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
+  //   tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
-    align: 'right',
+  //   align: 'right',
-    suffix: '%',
+  //   suffix: '%',
-  },
+  // },
 ];

src/views/property-marketing/media-account/account-detail/components/note-table/index.vue

@@ -87,6 +87,9 @@
             <template v-if="column.dataIndex === 'published_at'">
               {{ exactFormatTime(record.published_at) }}
             </template>
+            <template v-else-if="column.dataIndex === 'exposure_number'">
+              {{ formatNumberShow({ value: record.view_number * 10, showExactValue: true }) }}
+            </template>
             <template v-else>
               {{ formatTableField(column, record, true) }}
             </template>
@@ -113,7 +116,7 @@
 <script setup>
 import { TABLE_COLUMNS, INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
 import { useRoute } from 'vue-router';
-import { formatTableField, exactFormatTime } from '@/utils/tools';
+import { formatTableField, exactFormatTime, formatNumberShow } from '@/utils/tools';
 import { getMediaAccountBoardWorks } from '@/api/all/propertyMarketing';
 
 const route = useRoute();

src/views/property-marketing/media-account/account-detail/constants.ts

@@ -4,50 +4,47 @@
  */
 import { CUSTOM_FIELDS, getPropPrefix } from '@/views/property-marketing/media-account/common_constants';
 
-// 不足4个。就补两个null进去
+export function groupFieldsWithColSpan<
-export function groupArrayBySize<T extends { dataIndex: string; prop: string; title: string; tooltip: string }>(
+  T extends { dataIndex: string; prop?: string; title: string; tooltip?: string; notDifferentiateDateType?: boolean },
-  fields: T[],
+>(fields: T[], dateType: string): (T & { colSpan: number })[] {
-  groupSize = 4,
-  dateType: string,
-): T[][] {
-  const result: T[][] = [];
-
-  for (let i = 0; i < fields.length; i += groupSize) {
-    result.push(fields.slice(i, i + groupSize));
-  }
   const labelPrefix = dateType === 'week' ? '近7天' : '近30天';
-
+  return fields.map((item) => {
-  return result.map((item) => {
+    const newItem = { ...item, colSpan: item.dataIndex === 'ai_evaluation' ? 2 : 1 };
-    return item.map((item) => {
+    if (item.notDifferentiateDateType) {
+      return newItem;
+    } else {
       return {
-        ...item,
+        ...newItem,
         dataIndex: `${getPropPrefix(dateType)}${item.dataIndex}`,
         prop: `${getPropPrefix(dateType)}${item.prop}`,
         title: `${labelPrefix}${item.title}`,
-        tooltip: `${labelPrefix}${item.tooltip}`,
+        tooltip: `${labelPrefix}${item.tooltip}`
       };
-    });
+    }
   });
 }
 
 export const getAccountInfoFields = (dateType: string, showMore: boolean) => {
   const baseFields = [
-    [
+    { title: '账号名称', dataIndex: 'name', notDifferentiateDateType: true },
-      { title: '账号名称', dataIndex: 'name' },
+    { title: '数据更新时间', dataIndex: 'last_synced_at', notDifferentiateDateType: true },
-      { title: '项目分组', dataIndex: 'group.name' },
+    { title: '平台', dataIndex: 'platform', notDifferentiateDateType: true },
-      { title: '状态', dataIndex: 'status', type: 'status' },
+    { title: '状态', dataIndex: 'status', type: 'status', notDifferentiateDateType: true },
-      { title: '运营人员', dataIndex: 'operator.name' },
+    { title: '账户ID', dataIndex: 'id', notDifferentiateDateType: true },
-    ],
+    { title: '手机号码', dataIndex: 'mobile', notDifferentiateDateType: true },
-    [
+    { title: '运营人员', dataIndex: 'operator.name', notDifferentiateDateType: true },
-      { title: 'AI评价', dataIndex: 'ai_evaluation' },
+    { title: '所属项目', dataIndex: 'group.name', notDifferentiateDateType: true },
-      { title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。' },
+    { title: '分组', dataIndex: 'group.name', notDifferentiateDateType: true },
-      {
+    { title: '标签', dataIndex: 'tags', notDifferentiateDateType: true },
-        title: '总赞藏数',
+    { title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
-        dataIndex: 'like_collect_number',
+    { title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。', notDifferentiateDateType: true },
-        tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
+    {
-      },
+      title: '总赞藏数',
-    ],
+      notDifferentiateDateType: true,
+      dataIndex: 'like_collect_number',
+      tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
+    },
   ];
-  const customFields = groupArrayBySize(CUSTOM_FIELDS, 4, dateType);
+  const allFields = showMore ? [...baseFields, ...CUSTOM_FIELDS] : baseFields.slice(0,8);
-  return showMore ? [...baseFields, ...customFields] : [...baseFields];
+  return groupFieldsWithColSpan(allFields, dateType);
 };

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>
 

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

@@ -4,21 +4,34 @@
 -->
 <template>
   <div class="card-container">
-    <div
+    <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>
+        <a-tooltip content="点击查看账号详情">
+          <p class="name cursor-pointer hover:!color-#6d4cfe" @click="goDetail(item)">{{ item.name || '-' }}</p>
+        </a-tooltip>
         <div class="field-row">
           <span class="label">状态</span>
           <StatusBox :status="item.status" />
         </div>
+        <div class="field-row">
+          <span class="label">数据更新时间</span>
+          <span class="cts num">{{
+            exactFormatTime(item.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss')
+          }}</span>
+        </div>
         <div class="field-row">
           <span class="label">平台</span>
           <img :src="item.platform === 0 ? icon1 : icon2" width="16" height="16" />
@@ -70,6 +83,9 @@
             </a-button>
             <template #content>
               <a-doption class="color-#211F24" @click="openEdit(item)">编辑</a-doption>
+              <a-doption v-if="item.status === EnumStatus.NORMAL" class="color-#211F24" @click="handleReauthorize(item)"
+                >重新授权</a-doption
+              >
               <a-doption v-if="showPauseButton(item.status)" class="color-#211F24" @click="handlePause(item)"
                 >暂停同步</a-doption
               >
@@ -79,33 +95,19 @@
               <template #default>{{ getBtnText(item) }}</template>
             </a-button>
           </a-dropdown>
-
-          <!-- <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" @click="openDelete(item)" />
-          <a-button
-            v-if="showPauseButton(item.status)"
-            class="w-64px search-btn mr-8px"
-            size="mini"
-            @click="handlePause(item)"
-          >
-            <template #default>暂停同步</template>
-          </a-button>
-          <a-tooltip v-if="isAbnormalStatus(item.status)" :content="getTooltipText(item.status)">
-            <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
-              <template #default>重新授权</template>
-            </a-button>
-          </a-tooltip>
-          <template v-else>
-            <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
-              <template #default>{{ isUnauthorizedStatus(item.status) ? '去授权' : '重新授权' }}</template>
-            </a-button>
-          </template>
-
-          <a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
-            <template #default>编辑</template>
-          </a-button> -->
         </div>
       </div>
-    </div>
+      <div v-if="item.status === 2" class="mask">
+        <div class="flex items-center mb-16px box">
+          <img :src="icon3" width="16" height="16" class="mr-8px" />
+          <span class="name !mb-0">更新数据失败</span>
+        </div>
+        <div class="flex items-center">
+          <a-button class="search-btn mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
+          <a-button class="search-btn" size="mini" @click="syncData(item)">重新更新</a-button>
+        </div>
+      </div>
+    </a-spin>
     <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
     <ReauthorizeAccountModal ref="reauthorizeAccountModalRef" @update="emits('update')" />
     <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
@@ -113,8 +115,11 @@
 </template>
 
 <script setup>
-import { defineProps, ref, computed } from 'vue';
+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 { deleteSyncStatus } from '@/api/all/propertyMarketing';
+import { exactFormatTime } from '@/utils/tools';
 
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '../status-box';
@@ -123,6 +128,7 @@ import AuthorizedAccountModal from '../authorized-account-modal';
 
 import icon1 from '@/assets/img/media-account/icon-dy.png';
 import icon2 from '@/assets/img/media-account/icon-xhs.png';
+import icon3 from '@/assets/img/media-account/icon-warn.png';
 // import icon3 from '@/assets/img/media-account/icon-delete.png';
 
 const props = defineProps({
@@ -130,6 +136,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  syncMediaAccounts: {
+    type: Array,
+    default: () => [],
+  },
   selectedItems: {
     type: Array,
     default: () => [],
@@ -138,6 +148,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);
@@ -156,6 +168,12 @@ const toggleSelect = (item) => {
   }
   emits('selectionChange', newSelected);
 };
+const isSyncing = (item) => {
+  if (!props.syncMediaAccounts.length) return false;
+
+  const target = props.syncMediaAccounts.find((v) => v.id === item.id);
+  return target?.status === 0;
+};
 
 const openEdit = (item) => {
   emits('openEdit', item);
@@ -166,7 +184,6 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  console.log({ item });
   const { id, platform, status } = item;
   const isUnauthorized = isUnauthorizedStatus(status);
   if (isUnauthorized) {
@@ -183,6 +200,9 @@ const handlePause = (item) => {
 const showPauseButton = (status) => {
   return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
 };
+const showSyncDataButton = (status) => {
+  return [EnumStatus.NORMAL, EnumStatus.ABNORMAL_MISSING].includes(status);
+};
 const isUnauthorizedStatus = (status) => {
   return [EnumStatus.UNAUTHORIZED].includes(status);
 };
@@ -197,17 +217,23 @@ const isAbnormalStatus = (status) => {
   ].includes(status);
 };
 
-const getTooltipText = (status) => {
+// const getTooltipText = (status) => {
-  return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
+//   return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
-};
+// };
+
+const syncData = inject('handleSyncData');
 
 const onBtnClick = (item) => {
+  if (showSyncDataButton(item.status)) {
+    syncData(item);
+    return;
+  }
   if (isUnauthorizedStatus(item.status)) {
     handleReauthorize(item);
     return;
   }
 
-  if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
+  if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
     handleReauthorize(item);
     return;
   }
@@ -216,16 +242,29 @@ const onBtnClick = (item) => {
 };
 
 const getBtnText = (item) => {
+  if (showSyncDataButton(item.status)) {
+    return '更新数据';
+  }
+
   if (isUnauthorizedStatus(item.status)) {
     return '去授权';
   }
 
-  if ([EnumStatus.PAUSE, EnumStatus.NORMAL].includes(item.status) || isAbnormalStatus(item.status)) {
+  if ([EnumStatus.PAUSE].includes(item.status) || isAbnormalStatus(item.status)) {
     return '重新授权';
   }
 
   return '暂停同步';
 };
+
+const goDetail = (item) => {
+  router.push(`/media-account/detail/${item.id}`);
+};
+
+const onDeleteSyncStatus = async (item) => {
+  await deleteSyncStatus(item.id);
+  item.status = 1;
+};
 </script>
 
 <style scoped lang="scss">

src/views/property-marketing/media-account/account-manage/components/account-table/style.scss

@@ -17,6 +17,7 @@
     padding: 12px 16px 16px;
     display: flex;
     align-items: flex-start;
+    position: relative;
     .name {
       color: var(--Text-1, #211f24);
       font-family: $font-family-medium;
@@ -24,6 +25,7 @@
       font-style: normal;
       font-weight: 400;
       margin-bottom: 11px;
+      width: fit-content;
       // line-height: 22px; /* 157.143% */
     }
     .label {
@@ -78,6 +80,23 @@
         margin-bottom: 8px;
       }
     }
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      background-color: rgba(255, 255, 255, 0.8);
+      transition: opacity 0.1s cubic-bezier(0, 0, 1, 1);
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      .name {
+        font-family: $font-family-regular;
+      }
+    }
 
     .operate-row {
       display: flex;
@@ -86,7 +105,7 @@
       padding-top: 8px;
     }
     &.checked {
-      border: 1px solid var(--Brand-6, #6D4CFE);
+      border: 1px solid var(--Brand-6, #6d4cfe);
     }
   }
 }

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

@@ -2,176 +2,36 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-25 17:51:46
 -->
-<template>
+<script lang="jsx">
-  <a-modal
+import { ref, computed } from 'vue';
-    v-model:visible="visible"
+import {
-    :title="isEdit ? '编辑账号' : '添加账号'"
+  Modal,
-    modal-class="add-account-modal"
+  Form,
-    width="500px"
+  FormItem,
-    :mask-closable="false"
+  Input,
-    @close="onClose"
+  RadioGroup,
-  >
+  Radio,
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
+  Upload,
-      <a-form-item v-if="!isEdit" label="上传方式" required>
+  Button,
-        <a-radio-group v-model="uploadType">
+  Switch,
-          <a-radio value="manual">手动添加账号</a-radio>
+  Tooltip,
-          <a-radio value="batch">批量导入账号</a-radio>
+  Notification,
-        </a-radio-group>
+  Message as AMessage,
-      </a-form-item>
+  Textarea,
-
+} from '@arco-design/web-vue';
-      <!-- 批量导入账号模式下的内容 -->
-      <template v-if="isBatchImport">
-        <a-form-item label="账户文件" required>
-          <!-- 默认状态 -->
-          <div class="upload-block">
-            <template v-if="uploadStatus === UploadStatus.DEFAULT">
-              <a-upload
-                ref="uploadRef"
-                action="/"
-                draggable
-                :custom-request="handleUpload"
-                accept=".xlsx,.xls"
-                :show-file-list="false"
-              >
-                <template #upload-button>
-                  <div class="upload-box">
-                    <icon-plus size="14" class="mb-16px" />
-                    <span class="text mb-4px">点击或拖拽文件到此处上传</span>
-                    <span class="tip">支持 xls, xlsx格式</span>
-                  </div>
-                </template>
-              </a-upload>
-            </template>
-            <template v-else>
-              <div class="flex items-center">
-                <div
-                  class="flex items-center justify-between py-9px px-12px flex-1 import-row"
-                  :class="{
-                    error: uploadStatus === UploadStatus.ERROR,
-                  }"
-                >
-                  <div class="flex items-center">
-                    <icon-file size="16" class="flex-shrink-0" />
-                    <span class="name ml-8px">{{ fileName }}</span>
-                  </div>
-                  <span
-                    v-if="uploadStatus === UploadStatus.ERROR"
-                    class="upload-error flex-shrink-0"
-                    @click="handleBatchImport"
-                  >
-                    点击重试
-                  </span>
-                </div>
-                <img :src="icon2" width="16" height="16" class="cursor-pointer ml-12px" @click="removeFile" />
-              </div>
-            </template>
-            <div class="flex items-center cursor-pointer mt-8px" @click="handleDownloadTemplate">
-              <img :src="icon1" width="16" height="16" class="mr-4px" />
-              <span class="dt">下载账户导入模板.xlsx</span>
-            </div>
-          </div>
-        </a-form-item>
-      </template>
-
-      <!-- 手动添加账号 -->
-      <template v-else>
-        <template v-if="isEdit">
-          <a-form-item label="账号名称" field="name">
-            <a-input v-model="form.name" placeholder="请输入..." size="large" disabled />
-          </a-form-item>
-          <a-form-item label="账号ID" field="account_id">
-            <a-input v-model="form.account_id" placeholder="请输入..." size="large" disabled />
-          </a-form-item>
-          <a-form-item label="状态" field="status">
-            <StatusBox :status="form.status" />
-          </a-form-item>
-        </template>
-
-        <a-form-item label="手机号码" field="mobile" required>
-          <a-input v-model="form.mobile" placeholder="请输入..." size="large" />
-        </a-form-item>
-        <a-form-item label="运营人员" field="operator_name" required>
-          <a-input v-model="form.operator_name" placeholder="请输入..." class="w-240px" size="large" />
-        </a-form-item>
-        <a-form-item label="运营平台" :required="!isEdit">
-          <img v-if="isEdit" :src="form.platform === 0 ? icon3 : icon4" width="24" height="24" />
-          <a-radio-group v-else v-model="form.platform">
-            <a-radio :value="0">抖音</a-radio>
-            <a-radio :value="1">小红书</a-radio>
-          </a-radio-group>
-        </a-form-item>
-        <a-form-item label="号码持有人" field="holder_name">
-          <a-input v-model="form.holder_name" placeholder="请输入..." class="w-240px" size="large" />
-        </a-form-item>
-        <a-form-item label="选择分组">
-          <GroupSelect
-            v-model="form.group_id"
-            :multiple="false"
-            :options="groupOptions"
-            placeholder="请选择…"
-            size="large"
-          />
-        </a-form-item>
-        <a-form-item label="选择标签">
-          <TagSelect v-model="form.tag_ids" :options="tagOptions" placeholder="请选择…" size="large" />
-        </a-form-item>
-        <a-form-item label="笔记链接" field="end_work_link">
-          <template #label>
-            <span class="label">笔记链接</span>
-            <a-tooltip content="平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集">
-              <icon-question-circle size="14" class="ml-4px color-#737478" />
-            </a-tooltip>
-          </template>
-          <a-textarea
-            v-model="form.end_work_link"
-            placeholder="请输入..."
-            size="large"
-            max-length="72"
-            :auto-size="{ minRows: 3, maxRows: 5 }"
-          />
-        </a-form-item>
-        <template v-if="!isEdit">
-          <a-form-item label="Cookie值">
-            <template #label>
-              <span class="label">Cookie值</span>
-              <a-tooltip content="开启后可直接填写 Cookie，无需扫码授权">
-                <icon-question-circle size="14" class="ml-4px color-#737478" />
-              </a-tooltip>
-            </template>
-            <a-switch v-model="isCustomCookie" size="large" />
-          </a-form-item>
-          <a-form-item v-if="isCustomCookie" label="" field="cookie">
-            <a-textarea
-              v-model="form.cookie"
-              placeholder="请输入..."
-              size="large"
-              max-length="72"
-              :auto-size="{ minRows: 3, maxRows: 5 }"
-            />
-          </a-form-item>
-        </template>
-      </template>
-    </a-form>
-    <template #footer>
-      <a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
-      <a-button type="primary" size="large" @click="onSubmit">
-        {{ confirmBtnText }}
-      </a-button>
-    </template>
-
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
-    <ImportPromptModal ref="importPromptModalRef" />
-  </a-modal>
-</template>
-
-<script setup>
-import { ref, reactive, onMounted } from 'vue';
 import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
 import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
 import AuthorizedAccountModal from '../authorized-account-modal';
 import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
+import SyncDataModal from '../sync-data-modal';
 
+import icon1 from '@/assets/img/media-account/icon-download.png';
+import icon2 from '@/assets/img/media-account/icon-delete.png';
+import icon3 from '@/assets/img/media-account/icon-dy.png';
+import icon4 from '@/assets/img/media-account/icon-xhs.png';
+import icon5 from '@/assets/img/media-account/icon-warn-1.png';
+import icon6 from '@/assets/img/media-account/icon-success.png';
 import {
   fetchAccountTags,
   fetchAccountGroups,
@@ -182,13 +42,6 @@ import {
   batchMediaAccounts,
 } from '@/api/all/propertyMarketing';
 
-import icon1 from '@/assets/img/media-account/icon-download.png';
-import icon2 from '@/assets/img/media-account/icon-delete.png';
-import icon3 from '@/assets/img/media-account/icon-dy.png';
-import icon4 from '@/assets/img/media-account/icon-xhs.png';
-
-const emits = defineEmits(['update']);
-
 const UploadStatus = {
   DEFAULT: 'default',
   WAITING: 'waiting',
@@ -198,201 +51,413 @@ const INITIAL_FORM = {
   mobile: '',
   operator_name: '',
   holder_name: '',
-  platform: 0,
+  platform: 1,
   group_id: undefined,
   tag_ids: [],
   end_work_link: undefined,
   cookie: undefined,
 };
 
-const groupOptions = ref([]);
+export default {
-const tagOptions = ref([]);
+  setup(props, { emit, expose }) {
-const visible = ref(false);
+    const groupOptions = ref([]);
-const uploadType = ref('manual');
+    const tagOptions = ref([]);
-const uploadStatus = ref(UploadStatus.DEFAULT);
+    const visible = ref(false);
-const id = ref('');
+    const uploadType = ref('manual');
-const isEdit = ref(false);
+    const uploadStatus = ref(UploadStatus.DEFAULT);
-const fileName = ref('');
+    const id = ref('');
-const formRef = ref();
+    const isEdit = ref(false);
-const file = ref(null);
+    const fileName = ref('');
-const authorizedAccountModalRef = ref(null);
+    const formRef = ref();
-const importPromptModalRef = ref(null);
+    const file = ref(null);
-const uploadRef = ref(null);
+    const authorizedAccountModalRef = ref(null);
-const isCustomCookie = ref(false);
+    const importPromptModalRef = ref(null);
-const form = ref(cloneDeep(INITIAL_FORM));
+    const uploadRef = ref(null);
+    const isCustomCookie = ref(false);
+    const form = ref({ ...INITIAL_FORM });
+    const syncDataModalRef = ref(null);
+    const importLoading = ref(false);
+    const CustomNotificationVisible = ref(false);
 
-const rules = {
+    const rules = {
-  mobile: [
+      mobile: [
-    {
+        {
-      required: true,
+          required: true,
-      message: '请填写手机号',
+          message: '请填写手机号',
-      trigger: ['blur', 'change'],
+          trigger: ['blur', 'change'],
-    },
+        },
-    {
+        {
-      validator: (value, callback) => {
+          validator: (value, callback) => {
-        if (!/^1[3-9]\d{9}$/.test(value)) {
+            if (!/^1[3-9]\d{9}$/.test(value)) {
-          callback('手机号格式不正确');
+              callback('手机号格式不正确');
-        } else {
+            } else {
-          callback();
+              callback();
-        }
+            }
-      },
+          },
-      trigger: ['blur', 'change'],
+          trigger: ['blur', 'change'],
-    },
+        },
-  ],
+      ],
-  operator_name: [{ required: true, message: '请输入运营人员' }],
+      operator_name: [{ required: true, message: '请输入运营人员' }],
-  // holder_name: [{ required: true, message: '请输入号码持有人' }],
-};
-
-const isBatchImport = computed(() => uploadType.value === 'batch');
-const confirmBtnText = computed(() => {
-  if (isBatchImport.value) return '确定导入';
-  return isEdit.value ? '确定' : '生成授权码';
-});
-
-// 获取分组数据
-const getGroups = async () => {
-  const { code, data } = await fetchAccountGroups();
-  if (code === 200) {
-    groupOptions.value = data;
-  }
-};
-
-// 获取标签数据
-const getTags = async () => {
-  const { code, data } = await fetchAccountTags();
-  if (code === 200) {
-    tagOptions.value = data;
-  }
-};
-
-function handleUpload(option) {
-  const { fileItem } = option;
-
-  uploadStatus.value = UploadStatus.WAITING;
-
-  file.value = fileItem.file;
-  fileName.value = fileItem.name;
-}
-
-function removeFile() {
-  fileName.value = '';
-  file.value = null;
-  uploadStatus.value = UploadStatus.DEFAULT;
-}
-
-const reset = () => {
-  formRef.value.resetFields();
-  formRef.value.clearValidate();
-
-  form.value = cloneDeep(INITIAL_FORM);
-  fileName.value = '';
-  file.value = null;
-  isEdit.value = false;
-  isCustomCookie.value = false;
-  uploadStatus.value = UploadStatus.DEFAULT;
-  uploadType.value = 'manual';
-};
-const onClose = () => {
-  reset();
-  visible.value = false;
-};
-
-const open = (accountId = '') => {
-  id.value = accountId;
-  isEdit.value = !!accountId;
-
-  if (accountId) {
-    getAccountDetail();
-  }
-  getGroups();
-  getTags();
-
-  visible.value = true;
-};
-
-const getAccountDetail = async () => {
-  const { code, data } = await getMediaAccountsDetail(id.value);
-  if (code === 200) {
-    form.value = {
-      ...data,
-      group_id: data.group_id === 0 ? undefined : data.group_id,
     };
-  }
-};
 
-const handleBatchImport = async () => {
+    const isBatchImport = computed(() => uploadType.value === 'batch');
-  try {
+    const confirmBtnText = computed(() => {
-    const formData = new FormData();
+      if (isBatchImport.value) {
-    formData.append('file', file.value);
+        return importLoading.value ? '导入中' : '确定导入';
-
+      } else if (isEdit.value) {
-    const { code } = await batchMediaAccounts(formData, {
+        return '确定';
-      headers: {
+      } else {
-        'Content-Type': 'multipart/form-data',
+        return isCustomCookie.value ? '确认添加' : '生成授权码';
-      },
+      }
     });
-    if (code === 200) {
+
-      AMessage.success('导入成功');
+    const getGroups = async () => {
-      emits('update');
+      const { code, data } = await fetchAccountGroups();
-      onClose();
+      if (code === 200) {
-      importPromptModalRef.value.open();
+        groupOptions.value = data;
-    } else {
+      }
-      uploadStatus.value = UploadStatus.ERROR;
+    };
+    const getTags = async () => {
+      const { code, data } = await fetchAccountTags();
+      if (code === 200) {
+        tagOptions.value = data;
+      }
+    };
+    function handleUpload(option) {
+      const { fileItem } = option;
+      uploadStatus.value = UploadStatus.WAITING;
+      file.value = fileItem.file;
+      fileName.value = fileItem.name;
     }
-  } catch (error) {
+    function removeFile() {
-    uploadStatus.value = UploadStatus.ERROR;
+      fileName.value = '';
-  }
+      file.value = null;
-};
+      uploadStatus.value = UploadStatus.DEFAULT;
-
-const handleAddAccount = async () => {
-  const _isCustomCookie = isCustomCookie.value;
-  const { code, data } = await postMediaAccounts({
-    ...form.value,
-    cookie: _isCustomCookie ? form.value.cookie : undefined,
-  });
-  if (code === 200) {
-    emits('update');
-    onClose();
-
-    const { id, platform } = data;
-    !_isCustomCookie && startAuthorized(id, platform);
-  }
-};
-
-const handleEditAccount = async () => {
-  const { code } = await putMediaAccounts({ id: id.value, ...form.value });
-  if (code === 200) {
-    AMessage.success('修改成功');
-    emits('update');
-    onClose();
-  }
-};
-
-async function onSubmit() {
-  if (isBatchImport.value) {
-    handleBatchImport();
-    return;
-  }
-
-  formRef.value.validate(async (errors) => {
-    if (!errors) {
-      isEdit.value ? handleEditAccount() : handleAddAccount();
     }
-  });
+    const reset = () => {
-}
+      formRef.value?.resetFields();
+      formRef.value?.clearValidate();
+      form.value = { ...INITIAL_FORM };
+      fileName.value = '';
+      file.value = null;
+      isEdit.value = false;
+      importLoading.value = false;
+      isCustomCookie.value = false;
+      uploadStatus.value = UploadStatus.DEFAULT;
+      uploadType.value = 'manual';
+    };
+    const onClose = () => {
+      reset();
+      visible.value = false;
+    };
+    const open = (accountId = '') => {
+      id.value = accountId;
+      isEdit.value = !!accountId;
+      if (accountId) {
+        getAccountDetail();
+      }
+      getGroups();
+      getTags();
+      visible.value = true;
+    };
+    const getAccountDetail = async () => {
+      const { code, data } = await getMediaAccountsDetail(id.value);
+      if (code === 200) {
+        form.value = {
+          ...data,
+          group_id: data.group_id === 0 ? undefined : data.group_id,
+        };
+      }
+    };
+    const handleBatchImport = async () => {
+      try {
+        if (!file.value) {
+          AMessage.warning('请上传要导入的文件');
+          return;
+        }
+        importLoading.value = true;
+        const formData = new FormData();
+        formData.append('file', file.value);
+        const { code } = await batchMediaAccounts(formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        });
+        if (code === 200) {
+          AMessage.success('导入成功');
+          emit('update');
+          onClose();
 
-const startAuthorized = (id, platform) => {
+          // const ID = 'IMPORT-ACCOUNT';
-  authorizedAccountModalRef.value.open(id, platform);
+          // renderNotification(ID);
+          importPromptModalRef.value.open();
+        } else {
+          uploadStatus.value = UploadStatus.ERROR;
+        }
+      } catch (error) {
+        uploadStatus.value = UploadStatus.ERROR;
+      }
+    };
+    const handleAddAccount = async () => {
+      const _isCustomCookie = isCustomCookie.value;
+      const { code, data } = await postMediaAccounts({
+        ...form.value,
+        cookie: _isCustomCookie ? form.value.cookie : undefined,
+      });
+      if (code === 200) {
+        emit('update');
+        onClose();
+        const { id: _id, platform } = data;
+        if (_isCustomCookie) {
+          syncDataModalRef.value.open(_id);
+        } else {
+          startAuthorized(_id, platform);
+        }
+      }
+    };
+    const handleEditAccount = async () => {
+      const { code } = await putMediaAccounts({ id: id.value, ...form.value });
+      if (code === 200) {
+        AMessage.success('修改成功');
+        emit('update');
+        onClose();
+      }
+    };
+    async function onSubmit() {
+      if (isBatchImport.value) {
+        handleBatchImport();
+        return;
+      }
+      formRef.value.validate(async (errors) => {
+        if (!errors) {
+          if (isCustomCookie.value && !form.value.cookie) {
+            AMessage.warning('请填写Cookie值');
+            return;
+          }
+          isEdit.value ? handleEditAccount() : handleAddAccount();
+        }
+      });
+    }
+    const startAuthorized = (id, platform) => {
+      authorizedAccountModalRef.value.open(id, platform);
+    };
+    const handleDownloadTemplate = async () => {
+      const { code, data } = await getTemplateUrl();
+      if (code === 200) {
+        window.open(data.download_url, '_blank');
+      }
+    };
+    const handleDownloadError = () => {
+      console.log('handleDownloadError');
+    };
+    const renderLabel = (label, tooltipContent) => {
+      return (
+        <>
+          <span class="label">{label}</span>
+          <Tooltip content={tooltipContent}>
+            <icon-question-circle size="14" class="ml-4px color-#737478" />
+          </Tooltip>
+        </>
+      );
+    };
+    const renderNotification = (id, hasError) => {
+      Notification.warning({
+        id,
+        showIcon: false,
+        closable: true,
+        content: (
+          <div>
+            <div class="flex items-center mb-4px">
+              <img src={hasError ? icon5 : icon6} width="16" height="16" class="mr-8px" />
+              <span class="text-16px lh-24px font-400 color-#211F24">导入完成</span>
+            </div>
+            <p class="text-14px lh-22px font-400 color-#211F24">
+              共导入 37 个账号，导入成功 32 个{hasError ? `，失败 <span class="color-#F64B31">5</span> 个` : ''}
+            </p>
+            {hasError && (
+              <div class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={handleDownloadError}>
+                下载问题表格
+              </div>
+            )}
+          </div>
+        ),
+        duration: 3000,
+        class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
+      });
+    };
+
+    expose({ open });
+
+    return () => (
+      <Modal
+        v-model:visible={visible.value}
+        title={isEdit.value ? '编辑账号' : '添加账号'}
+        modal-class="add-account-modal"
+        width="500px"
+        mask-closable={false}
+        onClose={onClose}
+        footer={null}
+      >
+        <Form ref={formRef} model={form.value} rules={rules} layout="horizontal" auto-label-width>
+          {!isEdit.value && (
+            <FormItem label="上传方式" required>
+              <RadioGroup v-model={uploadType.value}>
+                <Radio value="manual">手动添加账号</Radio>
+                <Radio value="batch">批量导入账号</Radio>
+              </RadioGroup>
+            </FormItem>
+          )}
+          {isBatchImport.value ? (
+            <FormItem label="账号文件" required>
+              <div class="upload-block">
+                {uploadStatus.value === UploadStatus.DEFAULT ? (
+                  <Upload
+                    ref={uploadRef}
+                    action="/"
+                    draggable
+                    custom-request={handleUpload}
+                    accept=".xlsx,.xls"
+                    show-file-list={false}
+                  >
+                    {{
+                      'upload-button': () => (
+                        <div class="upload-box">
+                          <span class="text mb-4px">点击或拖拽文件到此处上传</span>
+                          <span class="tip">支持 xls, xlsx格式</span>
+                        </div>
+                      ),
+                    }}
+                  </Upload>
+                ) : (
+                  <div class="flex items-center">
+                    <div
+                      class={[
+                        'flex items-center justify-between py-9px px-12px flex-1 import-row',
+                        { error: uploadStatus.value === UploadStatus.ERROR },
+                      ]}
+                    >
+                      <div class="flex items-center">
+                        <span class="name ml-8px">{fileName.value}</span>
+                      </div>
+                      {uploadStatus.value === UploadStatus.ERROR && (
+                        <span class="upload-error flex-shrink-0" onClick={handleBatchImport}>
+                          点击重试
+                        </span>
+                      )}
+                    </div>
+                    <img src={icon2} width="16" height="16" class="cursor-pointer ml-12px" onClick={removeFile} />
+                  </div>
+                )}
+                <div class="flex items-center cursor-pointer mt-8px" onClick={handleDownloadTemplate}>
+                  <img src={icon1} width="16" height="16" class="mr-4px" />
+                  <span class="dt">下载账户导入模板.xlsx</span>
+                </div>
+              </div>
+            </FormItem>
+          ) : (
+            <>
+              {isEdit.value && (
+                <>
+                  <FormItem label="账号名称" field="name">
+                    <Input v-model={form.value.name} placeholder="请输入..." size="large" disabled />
+                  </FormItem>
+                  <FormItem label="账号ID" field="account_id">
+                    <Input v-model={form.value.account_id} placeholder="请输入..." size="large" disabled />
+                  </FormItem>
+                  <FormItem label="状态" field="status">
+                    <StatusBox status={form.value.status} />
+                  </FormItem>
+                </>
+              )}
+              <FormItem label="手机号码" field="mobile" required>
+                <Input v-model={form.value.mobile} placeholder="请输入..." size="large" />
+              </FormItem>
+              <FormItem label="运营人员" field="operator_name" required>
+                <Input v-model={form.value.operator_name} placeholder="请输入..." class="w-240px" size="large" />
+              </FormItem>
+              <FormItem label="运营平台" required={!isEdit.value}>
+                {isEdit.value ? (
+                  <img src={form.value.platform === 0 ? icon3 : icon4} width="24" height="24" />
+                ) : (
+                  <RadioGroup v-model={form.value.platform}>
+                    <Radio value={1}>小红书</Radio>
+                    <Radio value={0}>抖音</Radio>
+                  </RadioGroup>
+                )}
+              </FormItem>
+              <FormItem label="号码持有人" field="holder_name">
+                <Input v-model={form.value.holder_name} placeholder="请输入..." class="w-240px" size="large" />
+              </FormItem>
+              <FormItem label="选择分组">
+                <GroupSelect
+                  v-model={form.value.group_id}
+                  multiple={false}
+                  options={groupOptions.value}
+                  placeholder="请选择…"
+                  size="large"
+                />
+              </FormItem>
+              <FormItem label="选择标签">
+                <TagSelect v-model={form.value.tag_ids} options={tagOptions.value} placeholder="请选择…" size="large" />
+              </FormItem>
+              <FormItem
+                label="笔记链接"
+                field="end_work_link"
+                v-slots={{
+                  label: () =>
+                    renderLabel('笔记链接', '平台将从该笔记“之后”的内容开始同步，该笔记及更早的数据均不采集'),
+                }}
+              >
+                <Textarea
+                  v-model={form.value.end_work_link}
+                  placeholder="请输入..."
+                  size="large"
+                  max-length={72}
+                  auto-size={{ minRows: 3, maxRows: 5 }}
+                />
+              </FormItem>
+              {!isEdit.value && (
+                <>
+                  <FormItem
+                    label="Cookie值"
+                    v-slots={{
+                      label: () => renderLabel('Cookie值', 'Cookie，无需扫码授权'),
+                    }}
+                  >
+                    <Switch v-model={isCustomCookie.value} size="large" />
+                  </FormItem>
+                  {isCustomCookie.value && (
+                    <FormItem label="" field="cookie">
+                      <Textarea
+                        v-model={form.value.cookie}
+                        placeholder="请输入..."
+                        size="large"
+                        max-length={72}
+                        auto-size={{ minRows: 3, maxRows: 5 }}
+                      />
+                    </FormItem>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </Form>
+        <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
+          <Button size="large" class="cancel-btn" onClick={onClose}>
+            取消
+          </Button>
+          <Button type="primary" size="large" loading={importLoading.value} onClick={onSubmit}>
+            {confirmBtnText.value}
+          </Button>
+        </div>
+
+        <AuthorizedAccountModal ref={authorizedAccountModalRef} onUpdate={() => emit('update')} />
+        <ImportPromptModal ref={importPromptModalRef} />
+        <SyncDataModal ref={syncDataModalRef} />
+      </Modal>
+    );
+  },
 };
-
-const handleDownloadTemplate = async () => {
-  const { code, data } = await getTemplateUrl();
-  if (code === 200) {
-    window.open(data.download_url, '_blank');
-  }
-};
-
-// 对外暴露打开弹窗方法
-defineExpose({ open });
 </script>
 
 <style lang="scss">

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

@@ -28,7 +28,7 @@
 
       <template v-else>
         <!-- 完成状态 -->
-        <template v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED">
+        <template v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)">
           <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>
@@ -61,10 +61,8 @@
                 ></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" />
@@ -82,7 +80,7 @@
         重新生成
       </a-button>
       <a-button
-        v-if="modalState === MODAL_STATE.SUCCESS || modalState === MODAL_STATE.FAILED"
+        v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)"
         size="large"
         class="cancel-btn"
         @click="close"
@@ -94,12 +92,15 @@
       </a-button>
     </template>
   </a-modal>
+
+  <SyncDataModal ref="syncDataModalRef" />
 </template>
 
 <script setup>
 import { defineExpose, ref, computed } from 'vue';
 import { Message as AMessage } from '@arco-design/web-vue';
 import { getAuthorizedImage, getMediaAccountsAuthorizedStatus } from '@/api/all/propertyMarketing';
+import SyncDataModal from '../sync-data-modal';
 
 import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
@@ -127,6 +128,7 @@ const progress = ref(0);
 const id = ref('');
 const platform = ref('');
 const qrCodeUrl = ref('');
+const syncDataModalRef = ref(null);
 
 let progressTimer = null;
 let overdueTimer = null;
@@ -140,7 +142,7 @@ const confirmBtnText = computed(() => {
     [MODAL_STATE.QR_READY]: '完成扫码',
     [MODAL_STATE.QR_EXPIRED]: '重新生成',
     [MODAL_STATE.LOADING]: '处理中...',
-    [MODAL_STATE.SUCCESS]: '继续添加',
+    [MODAL_STATE.SUCCESS]: '确认添加',
     [MODAL_STATE.FAILED]: '重新扫码',
   };
   return btnTextMap[modalState.value] || '确定';
@@ -299,6 +301,7 @@ const handleOk = () => {
 
   // 授权成功，关闭弹窗
   if (modalState.value === MODAL_STATE.SUCCESS) {
+    syncDataModalRef.value.open(id.value);
     close();
     return;
   }

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

@@ -108,12 +108,15 @@
       </a-button>
     </template>
   </a-modal>
+
+  <SyncDataModal ref="syncDataModalRef" />
 </template>
 
 <script setup>
 import { defineExpose, ref, computed } from 'vue';
 import { Message as AMessage } from '@arco-design/web-vue';
 import { getMediaAccountsAuthorizedStatus, getAuthorizedImage } from '@/api/all/propertyMarketing';
+import SyncDataModal from '../sync-data-modal';
 
 import icon1 from '@/assets/img/media-account/icon-default-qrcode.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
@@ -142,6 +145,7 @@ const id = ref('');
 const platform = ref('');
 const qrCodeUrl = ref('');
 const isNicknameChanged = ref(false); // 昵称发生变化
+const syncDataModalRef = ref(null);
 
 let progressTimer = null;
 let overdueTimer = null;
@@ -155,7 +159,7 @@ const confirmBtnText = computed(() => {
     [MODAL_STATE.QR_READY]: '完成扫码',
     [MODAL_STATE.QR_EXPIRED]: '重新生成',
     [MODAL_STATE.LOADING]: '处理中...',
-    [MODAL_STATE.SUCCESS]: isNicknameChanged.value ? '确定覆盖' : '继续添加',
+    [MODAL_STATE.SUCCESS]: isNicknameChanged.value ? '确定覆盖' : '确认添加',
     [MODAL_STATE.FAILED]: '重新扫码',
   };
   return btnTextMap[modalState.value] || '确定';
@@ -318,6 +322,7 @@ const handleOk = () => {
       console.log('确定覆盖');
       // 这里可以添加覆盖逻辑
     } else {
+      syncDataModalRef.value.open(id.value);
       close();
     }
     return;

src/views/property-marketing/media-account/account-manage/components/sync-data-modal/index.vue

@@ -0,0 +1,58 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="480px"
+    title="更新数据"
+    modal-class="sync-data-modal"
+    :mask-closable="false"
+    @close="close"
+  >
+    <div class="flex flex-col items-center">
+      <div class="flex items-center">
+        <img :src="icon1" width="20" height="20" class="mr-12px" />
+        <div class="flex flex-col">
+          <p class="tip">为确保数据准确，建议立即同步账号数据。您也可以在账号管理列表中手动触发更新。</p>
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <a-button size="large" class="cancel-btn" @click="close">稍后再说</a-button>
+      <a-button type="primary" size="large" @click="handleOk"> 更新数据 </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose } from 'vue';
+
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const syncData = inject('handleSyncData');
+
+const id = ref('');
+
+const visible = ref(false);
+const open = (accountId) => {
+  id.value = accountId;
+  visible.value = true;
+};
+const close = () => {
+  id.value = '';
+  visible.value = false;
+};
+const handleOk = () => {
+  syncData({ id: id.value });
+  close();
+};
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>

src/views/property-marketing/media-account/account-manage/components/sync-data-modal/style.scss

@@ -0,0 +1,14 @@
+@import "@/views/property-marketing/component.scss";
+.sync-data-modal {
+  border-radius: 8px;
+  .arco-modal-body {
+    .tip {
+      color: var(--Text-1, #211f24);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+  }
+}

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

@@ -13,7 +13,7 @@ export const INITIAL_QUERY = {
 
 export const INITIAL_PAGE_INFO = {
   page: 1,
-  pageSize: 8,
+  pageSize: 20,
   total: 0,
 };
 

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

@@ -51,6 +51,9 @@
               个账号
             </span>
 
+            <span class="operation-btn" :class="{ disabled: isDisabledBatchSyncData }" @click="handleBatchSyncData"
+              >批量更新数据</span
+            >
             <span class="operation-btn" @click="handleBatchTag">批量标签</span>
             <span class="operation-btn" @click="handleBatchGroup">批量分组</span>
             <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
@@ -76,6 +79,7 @@
     <div class="card-wrap">
       <AccountTable
         v-if="dataSource.length > 0"
+        :syncMediaAccounts="syncMediaAccounts"
         :dataSource="dataSource"
         :selectedItems="selectedItems"
         @selectionChange="handleSelectionChange"
@@ -91,7 +95,8 @@
           size="mini"
           show-total
           show-jumper
-          :show-page-size="false"
+          show-page-size
+          :page-size-options="[8, 16, 20, 32, 64]"
           :current="pageInfo.page"
           :page-size="pageInfo.pageSize"
           @change="onPageChange"
@@ -111,7 +116,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, provide } from 'vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
@@ -121,9 +126,17 @@ import AddAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 import BatchTagModal from './components/batch-tag-modal';
 import BatchGroupModal from './components/batch-group-modal';
+import { Notification } from '@arco-design/web-vue';
 
 import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
-import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
+import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import {
+  getMediaAccounts,
+  getMediaAccountsHealth,
+  postSyncMediaAccountData,
+  postBatchSyncMediaAccountData,
+  getMediaAccountSyncStatus,
+} from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon2 from '@/assets/img/media-account/icon-group.png';
@@ -132,6 +145,8 @@ import icon4 from '@/assets/img/media-account/icon-success.png';
 import icon5 from '@/assets/img/media-account/icon-warn.png';
 import icon6 from '@/assets/img/media-account/icon-close.png';
 
+let syncDataTimer = null;
+
 const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
@@ -145,8 +160,11 @@ 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);
+const isDisabledBatchSyncData = computed(() => selectedItems.value.some((item) => item.status !== EnumStatus.NORMAL));
 
 const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
 const indeterminate = computed(
@@ -164,6 +182,7 @@ const tipLabel = computed(() => {
     too_many_requests_number = 0,
     account_frozen_number = 0,
     miss_data_number = 0,
+    abnormal_number = 0,
   } = healthData.value;
 
   // 定义异常类型映射
@@ -172,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: '其他异常' },
   ];
 
   // 过滤出有异常的项并格式化
@@ -180,10 +200,6 @@ const tipLabel = computed(() => {
   return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
-onMounted(() => {
-  getData();
-});
-
 const getData = () => {
   getHealthData();
   getAccountData();
@@ -262,10 +278,55 @@ const handleDelete = (item) => {
 const handleCloseTip = () => {
   selectedItems.value = [];
 };
+// 先立即执行一次
+const getAsyncStatus = async () => {
+  const { code, data } = await getMediaAccountSyncStatus();
+  if (code === 200) {
+    syncMediaAccounts.value = data;
+
+    // 所有任务都结束了，才停止轮询，刷新页面
+    const isEnd = data.every((item) => item.status !== 0);
+    if (isEnd) {
+      clearSyncDataTimer();
+      startSyncData.value = false;
+      getData();
+    }
+  }
+};
+
+const startSyncDataPolling = () => {
+  startSyncData.value = true;
+  clearSyncDataTimer();
+
+  getAsyncStatus();
+  syncDataTimer = setInterval(getAsyncStatus, 3000);
+};
+
+const handleSyncData = async (item) => {
+  const { code } = await postSyncMediaAccountData(item.id);
+  if (code === 200) {
+    if (!startSyncData.value) {
+      startSyncDataPolling();
+    }
+  }
+};
 
 const handleBatchTag = () => {
   batchTagModalRef.value?.open(selectedItems.value);
 };
+const handleBatchSyncData = async () => {
+  if (isDisabledBatchSyncData.value) {
+    return;
+  }
+
+  const ids = selectedItems.value.map((item) => item.id);
+  const { code } = await postBatchSyncMediaAccountData({ ids });
+  if (code === 200) {
+    if (!startSyncData.value) {
+      startSyncDataPolling();
+    }
+  }
+};
 const handleBatchGroup = () => {
   batchGroupModalRef.value?.open(selectedItems.value);
 };
@@ -277,6 +338,21 @@ const handleOpenAbnormalAccount = () => {
   query.value.status = 2;
   reload();
 };
+const clearSyncDataTimer = () => {
+  if (syncDataTimer) {
+    clearInterval(syncDataTimer);
+    syncDataTimer = null;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+onUnmounted(() => {
+  clearSyncDataTimer();
+});
+
+provide('handleSyncData', handleSyncData);
 </script>
 
 <style scoped lang="scss">

src/views/property-marketing/media-account/account-manage/style.scss

@@ -60,7 +60,7 @@
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: $font-family-medium;
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -71,6 +71,10 @@
       &.red {
         color: #F64B31;
       }
+      &.disabled {
+        color: #C5B7FF;
+        cursor: not-allowed;
+      }
     }
   }
   .card-wrap {

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

@@ -19,6 +19,12 @@
           <span class="label">状态</span>
           <StatusBox :status="item.status" />
         </div>
+        <div class="field-row">
+          <span class="label">数据更新时间</span>
+          <span class="cts num">{{
+            exactFormatTime(item.last_synced_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss')
+          }}</span>
+        </div>
         <div class="field-row">
           <span class="label">平台</span>
           <img :src="PLATFORM_LIST.find((v) => v.value === item.platform)?.icon" width="14" height="14" />
@@ -73,7 +79,7 @@ import { defineProps, ref, computed } from 'vue';
 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 { formatNumberShow, exactFormatTime } from '@/utils/tools';
 
 import PauseAccountPatchModal from './pause-account-patch';
 import StatusBox from '../status-box';

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

@@ -250,6 +250,7 @@ const handleSyncData = () => {
   if (syncType.value === INITIAL_SYNC_TYPE) {
     postPlacementAccountsSync(id.value).then((res) => {
       if (res.code === 200) {
+        update();
         close();
       }
     });

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

@@ -76,7 +76,8 @@
           size="mini"
           show-total
           show-jumper
-          :show-page-size="false"
+          show-page-size
+          :page-size-options="[8, 16, 20, 32, 64]"
           :current="pageInfo.page"
           :page-size="pageInfo.pageSize"
           @change="onPageChange"
@@ -113,7 +114,7 @@ const deleteAccountRef = ref(null);
 
 const pageInfo = ref({
   page: 1,
-  pageSize: 8,
+  pageSize: 20,
   total: 0,
 });
 const query = ref(cloneDeep(INITIAL_QUERY));
@@ -139,6 +140,7 @@ const tipLabel = computed(() => {
     too_many_requests_number = 0,
     account_frozen_number = 0,
     miss_data_number = 0,
+    abnormal_number = 0,
   } = healthData.value;
 
   // 定义异常类型映射
@@ -147,6 +149,7 @@ const tipLabel = computed(() => {
     { count: too_many_requests_number, label: '请求频繁' },
     { count: account_frozen_number, label: '账号被封' },
     { count: miss_data_number, label: '数据缺失' },
+    { count: abnormal_number, label: '其他异常' },
   ];
 
   // 过滤出有异常的项并格式化