diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a98f933..a78dbb9 100644
--- a/.eslintrc.cjs
+++ b/.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',
diff --git a/config/index.ts b/config/index.ts
index 58a9509..5c96895 100644
--- a/config/index.ts
+++ b/config/index.ts
@@ -1,5 +1,5 @@
 import { configUnocss } from './plugins';
-import { configAutoImport, configComponents, configIcons } from './unplugin';
+import { configAutoImport, configComponents,configIcons } from './unplugin';
 import viteCompression from 'vite-plugin-compression';
 import progress from 'vite-plugin-progress';
 import defineOptions from 'unplugin-vue-define-options/vite';
diff --git a/config/plugins/unocss.ts b/config/plugins/unocss.ts
index c5b1970..0910253 100644
--- a/config/plugins/unocss.ts
+++ b/config/plugins/unocss.ts
@@ -1,8 +1,8 @@
 /*
  * @Author: 田鑫
  * @Date: 2023-03-05 18:14:16
- * @LastEditors: Please set LastEditors
- * @LastEditTime: 2025-06-25 10:54:24
+ * @LastEditors: rd 1344903914@qq.com
+ * @LastEditTime: 2025-07-11 16:30:29
  * @Description:
  */
 import Unocss from 'unocss/vite';
@@ -41,21 +41,5 @@ export const configUnocss = () =>
       [/^w-(\d+)$/, ([, d]) => ({ width: `${d}px !important` })],
       [/^h-(\d+)$/, ([, d]) => ({ height: `${d}px !important` })],
       [/^ft-(\d+)$/, ([, d]) => ({ 'font-size': `${d}px !important` })],
-      [
-        'box-container',
-        {
-          'border-radius': '2px',
-          padding: '20px',
-          margin: '8px',
-          'background-color': '#fff',
-        },
-      ],
-      [
-        'justify-between',
-        {
-          'justify-content': 'space-between',
-        },
-      ],
-      ['align-center', { 'text-align': 'center' }],
     ],
   });
diff --git a/config/unplugin/auto-import.ts b/config/unplugin/auto-import.ts
index 69e7b9a..7778cc9 100644
--- a/config/unplugin/auto-import.ts
+++ b/config/unplugin/auto-import.ts
@@ -1,14 +1,9 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-24 16:29:10
- */
 /**
  * 自动引入API
  * */
 import AutoImport from 'unplugin-auto-import/vite';
 
 import { ArcoResolver } from 'unplugin-vue-components/resolvers';
-import IconsResolver from 'unplugin-icons/resolver';
 
 import { layoutsResolver } from '../utils';
 
@@ -21,7 +16,7 @@ export function configAutoImport() {
       '@vueuse/core',
       {
         dayjs: [['default', 'dayjs']],
-        'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'uniq', 'isNumber', 'uniqBy', 'isEmpty'],
+        'lodash-es': ['cloneDeep', 'omit', 'pick', 'union', 'uniq', 'isNumber', 'uniqBy', 'isEmpty', 'merge', 'debounce'],
         '@/hooks': ['useModal'],
       },
     ],
@@ -31,9 +26,6 @@ export function configAutoImport() {
           enable: true,
         },
       }),
-      IconsResolver({
-        enabledCollections: [],
-      }),
       layoutsResolver(),
     ],
     eslintrc: {
diff --git a/config/unplugin/component.ts b/config/unplugin/component.ts
index 9840799..57b9dc8 100644
--- a/config/unplugin/component.ts
+++ b/config/unplugin/component.ts
@@ -5,7 +5,6 @@ import { kebabCase } from 'unplugin-vue-components';
 import Components from 'unplugin-vue-components/vite';
 
 import { ArcoResolver } from 'unplugin-vue-components/resolvers';
-import IconsResolver from 'unplugin-icons/resolver';
 
 import { getSep, getPath, setResolve, layoutsResolver } from '../utils';
 
@@ -20,11 +19,6 @@ export function configComponents() {
         },
         sideEffect: true,
       }),
-      IconsResolver({
-        prefix: false,
-        customCollections: ['i'],
-        enabledCollections: [],
-      }),
       layoutsResolver(),
       {
         type: 'component',
diff --git a/config/unplugin/icons.ts b/config/unplugin/icons.ts
index 2afaffa..0c94bf2 100644
--- a/config/unplugin/icons.ts
+++ b/config/unplugin/icons.ts
@@ -1,14 +1,14 @@
-/**
- * 自动引入 svg 图标
- * */
-import Icons from 'unplugin-icons/vite';
-import { FileSystemIconLoader } from 'unplugin-icons/loaders';
+// /**
+//  * 自动引入 svg 图标
+//  * */
+import { resolve } from '../utils';
+
+import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
 export function configIcons() {
-  return Icons({
-    compiler: 'vue3',
-    customCollections: {
-      i: FileSystemIconLoader('./src/assets', (svg) => svg.replace(/^<svg /, '<svg class="eo-i" ')),
-    },
-  });
-}
+  return createSvgIconsPlugin({
+    iconDirs: [resolve( "src/assets/svg")],
+    symbolId: "icon-[dir]-[name]",
+  })
+};
+
diff --git a/package.json b/package.json
index 1b334c3..18f8c9d 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
     "vite": "^4.0.4",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-progress": "^0.0.6",
+    "vite-plugin-svg-icons": "^2.0.1",
     "vue-eslint-parser": "^9.1.0",
     "vue-tsc": "^1.0.24"
   },
diff --git a/src/App.vue b/src/App.vue
index 325eb50..21ab695 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,14 +5,16 @@
   </a-config-provider>
 </template>
 
-<script setup lang="ts">
+<script setup>
 import { useUserStore } from '@/stores';
 
 import { getUserEnterpriseInfo } from '@/utils/user';
+import { useSidebarStore } from '@/stores/modules/side-bar';
 
 import zhCN from '@arco-design/web-vue/es/locale/lang/zh-cn';
 
 const userStore = useUserStore();
+const sidebarStore = useSidebarStore();
 
 const redTheme = {
   token: {
@@ -20,7 +22,6 @@ const redTheme = {
     colorLink: '#f5222d', // 链接色
   },
 };
-// 初始化企业信息
 
 const init = async () => {
   const { isLogin, getUserInfo } = userStore;
@@ -28,6 +29,10 @@ const init = async () => {
   if (isLogin) {
     await getUserInfo(); // 初始化用户信息
     await getUserEnterpriseInfo();
+
+    sidebarStore.startUnreadInfoPolling();
+  } else {
+    sidebarStore.stopUnreadInfoPolling();
   }
 };
 
@@ -40,4 +45,11 @@ onMounted(() => {
     console.error(`发现catch报错：${event.reason}`);
   });
 });
+onUnmounted(() => {
+  sideBarStore.stopUnreadInfoPolling();
+});
 </script>
+
+<style lang="scss">
+@import './styles/index.scss';
+</style>
diff --git a/src/api/all/common.ts b/src/api/all/common.ts
index 9b210da..d06e4f4 100644
--- a/src/api/all/common.ts
+++ b/src/api/all/common.ts
@@ -13,3 +13,52 @@ export const getCustomColumns = (params = {}) => {
 export const updateCustomColumns = (params = {}) => {
   return Http.put('/v1/custom-columns', params);
 };
+
+export const getUserList = (params = {}) => {
+  return Http.get('/v1/users/list', params);
+};
+
+// 任务中心-分页
+export const getTask = (params = {}) => {
+  return Http.get('/v1/tasks', params);
+};
+
+// 任务中心-批量删除
+export const deleteBatchTasks = (params = {}) => {
+  return Http.delete('/v1/tasks', { data: params });
+};
+
+// 任务中心-删除
+export const deleteTask = (id: string) => {
+  return Http.delete(`/v1/tasks/${id}`);
+};
+
+// 任务中心-查询任务状态
+export const getTaskStatus = (id: string) => {
+  return Http.get(`/v1/tasks/${id}/status`);
+};
+
+// 任务中心-获取未读任务
+export const getTaskUnread = () => {
+  return Http.get(`/v1/tasks/unread`);
+};
+
+// 任务中心-已读
+export const patchTaskRead = (params = {}) => {
+  return Http.patch('/v1/tasks/read', params);
+};
+
+// 任务中心-重做任务
+export const postRedoTask = (id: string) => {
+  return Http.post(`/v1/tasks/${id}/redo`);
+};
+
+// 任务中心-批量下载
+export const postBatchDownload = (params = {}) => {
+  return Http.post(`/v1/tasks/batch-download`, params);
+};
+
+// 任务中心-批量查询任务状态
+export const batchQueryTaskStatus = (params = {}) => {
+  return Http.get(`/v1/tasks/batch-query-status`, params);
+};
\ No newline at end of file
diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index 063d2ce..75f68a1 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -24,6 +24,11 @@ export const getMediaAccounts = (params = {}) => {
   return Http.get('/v1/media-accounts', params);
 };
 
+// 媒体账号-列表
+export const getMediaAccountList = (params = {}) => {
+  return Http.get('/v1/media-accounts/list', params);
+};
+
 // 媒体账号-健康情况
 export const getMediaAccountsHealth = (params = {}) => {
   return Http.get('/v1/media-accounts/health', params);
@@ -294,7 +299,7 @@ export const getPlacementAccountProjectsTrend = (params = {}) => {
 export const getPlacementGuide = (params: {}) => {
   return Http.get(`/v1/placement-account-projects/getGuideList`, params);
 };
-//查询投放指南历史
+// 查询投放指南历史
 export const getPlacementGuideHistory = (params: {}) => {
   return Http.get(`/v1/placement-account-projects/getGuideListHistory`, params);
 };
@@ -312,7 +317,7 @@ export const getPlacementGuideDetail = (id: string) => {
   return Http.get(`/v1/placement-account-projects/historylog/${id}`);
 };
 
-//删除记录
+// 删除记录
 export const deleteHistorylog = (id: string) => {
   return Http.delete(`/v1/placement-account-projects/historylog/${id}`);
 };
@@ -332,4 +337,68 @@ export const postPlacementAccountsSync = (id: string) => {
   return Http.post(`/v1/placement-accounts/${id}/sync-data`);
 };
 
+// 投放账号-子账号分页
+export const postSubAccount = (params = {}) => {
+  return Http.post('/v1/placement-accounts/get-subaccount', 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`);
+};
+
+// 内容稿件-列表
+export const getWorksList = (params = {}) => {
+  return Http.get('/v1/works/list', params);
+};
+
+// 项目管理-分页
+export const getProjects = (params = {}) => {
+  return Http.get('/v1/projects', params);
+};
+
+// 项目管理-列表
+export const getProjectList = () => {
+  return Http.get('/v1/projects/list');
+};
+
+// 项目管理-删除
+export const deleteProject = (id: string) => {
+  return Http.delete(`/v1/projects/${id}`);
+};
+
+// 项目管理-添加
+export const postAddProject = (params: {}) => {
+  return Http.post('/v1/projects', params);
+};
+
+// 项目管理-修改
+export const putProject = (params = {}) => {
+  const { id, ...rest } = params as { id: string; [key: string]: any };
+  return Http.put(`/v1/projects/${id}`, rest);
+};
+
+// 项目管理-详情
+export const getProjectDetail = (id: string) => {
+  return Http.get(`/v1/projects/${id}`);
+};
diff --git a/src/assets/fonts/Alibaba-PuHuiTi-Bold.woff2 b/src/assets/fonts/Alibaba-PuHuiTi-Bold.woff2
deleted file mode 100644
index 1d97b91..0000000
Binary files a/src/assets/fonts/Alibaba-PuHuiTi-Bold.woff2 and /dev/null differ
diff --git a/src/assets/fonts/Alibaba-PuHuiTi-Medium.woff2 b/src/assets/fonts/Alibaba-PuHuiTi-Medium.woff2
deleted file mode 100644
index 61d1468..0000000
Binary files a/src/assets/fonts/Alibaba-PuHuiTi-Medium.woff2 and /dev/null differ
diff --git a/src/assets/fonts/Alibaba-PuHuiTi-Regular.woff2 b/src/assets/fonts/Alibaba-PuHuiTi-Regular.woff2
deleted file mode 100644
index bc37329..0000000
Binary files a/src/assets/fonts/Alibaba-PuHuiTi-Regular.woff2 and /dev/null differ
diff --git a/src/assets/fonts/Manrope-Bold.ttf b/src/assets/fonts/Manrope-Bold.ttf
new file mode 100644
index 0000000..2f84ae3
Binary files /dev/null and b/src/assets/fonts/Manrope-Bold.ttf differ
diff --git a/src/assets/fonts/Manrope-Medium.ttf b/src/assets/fonts/Manrope-Medium.ttf
new file mode 100644
index 0000000..c73d774
Binary files /dev/null and b/src/assets/fonts/Manrope-Medium.ttf differ
diff --git a/src/assets/fonts/Manrope-Regular.ttf b/src/assets/fonts/Manrope-Regular.ttf
new file mode 100644
index 0000000..c02b01b
Binary files /dev/null and b/src/assets/fonts/Manrope-Regular.ttf differ
diff --git a/src/assets/fonts/Manrope-SemiBold.ttf b/src/assets/fonts/Manrope-SemiBold.ttf
new file mode 100644
index 0000000..30ee031
Binary files /dev/null and b/src/assets/fonts/Manrope-SemiBold.ttf differ
diff --git a/src/assets/img/media-account/icon-xhs.png b/src/assets/img/media-account/icon-xhs.png
index 7429e58..c66ac71 100644
Binary files a/src/assets/img/media-account/icon-xhs.png and b/src/assets/img/media-account/icon-xhs.png differ
diff --git a/src/assets/svg/icon-intelligentSolution.svg b/src/assets/svg/svg-intelligentSolution.svg
similarity index 100%
rename from src/assets/svg/icon-intelligentSolution.svg
rename to src/assets/svg/svg-intelligentSolution.svg
diff --git a/src/assets/svg/icon-mediaAccount.svg b/src/assets/svg/svg-mediaAccount.svg
similarity index 100%
rename from src/assets/svg/icon-mediaAccount.svg
rename to src/assets/svg/svg-mediaAccount.svg
diff --git a/src/assets/svg/svg-projectManagement.svg b/src/assets/svg/svg-projectManagement.svg
new file mode 100644
index 0000000..8266f40
--- /dev/null
+++ b/src/assets/svg/svg-projectManagement.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M5.25065 1.3125C5.4638 1.31254 5.67398 1.36363 5.86328 1.46159L7.86328 2.49674C8.05258 2.5947 8.26278 2.64579 8.47591 2.64583L13.3822 2.64583C14.1185 2.64583 14.7155 3.24282 14.7155 3.97917L14.7155 13.3542C14.7155 14.0905 14.1185 14.6875 13.3822 14.6875L2.61784 14.6875C1.88146 14.6875 1.28451 14.0905 1.28451 13.3542L1.28451 2.64583C1.28455 1.90949 1.88149 1.3125 2.61784 1.3125L5.25065 1.3125ZM4.528 9.99023C4.14147 9.9903 3.82815 10.3036 3.82813 10.6901C3.82813 11.0767 4.14146 11.3899 4.528 11.39C4.91459 11.39 5.22787 11.0767 5.22787 10.6901C5.22784 10.3035 4.91458 9.99023 4.528 9.99023ZM7.153 10.0905C6.82179 10.0907 6.55342 10.3589 6.55339 10.6901C6.55339 11.0214 6.82177 11.2902 7.153 11.2904L11.5384 11.2904C11.8698 11.2904 12.1387 11.0215 12.1387 10.6901C12.1386 10.3588 11.8698 10.0905 11.5384 10.0905L7.153 10.0905ZM4.528 6.50846C4.14155 6.50853 3.82828 6.82191 3.82813 7.20833C3.82813 7.59489 4.14146 7.90878 4.528 7.90885C4.91459 7.90885 5.22787 7.59493 5.22787 7.20833C5.22771 6.82187 4.9145 6.50846 4.528 6.50846ZM7.153 6.60872C6.82187 6.60889 6.55355 6.87721 6.55339 7.20833C6.55339 7.5396 6.82177 7.80843 7.153 7.80859H11.5384C11.8698 7.80859 12.1387 7.5397 12.1387 7.20833C12.1385 6.8771 11.8697 6.60872 11.5384 6.60872H7.153Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/assets/svg/icon-putAccount.svg b/src/assets/svg/svg-putAccount.svg
similarity index 100%
rename from src/assets/svg/icon-putAccount.svg
rename to src/assets/svg/svg-putAccount.svg
diff --git a/src/assets/svg/icon-repository.svg b/src/assets/svg/svg-repository.svg
similarity index 100%
rename from src/assets/svg/icon-repository.svg
rename to src/assets/svg/svg-repository.svg
diff --git a/src/assets/svg/svg-taskCenter.svg b/src/assets/svg/svg-taskCenter.svg
new file mode 100644
index 0000000..c4ee6af
--- /dev/null
+++ b/src/assets/svg/svg-taskCenter.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+  <path d="M9.2041 2.32617C11.6897 2.32617 13.7595 4.10156 14.2178 6.45312C15.2902 7.15513 16 8.36571 16 9.74316C16 11.9142 14.2393 13.6738 12.0684 13.6738H3.93066C1.75983 13.6736 3.83345e-05 11.9141 0 9.74316C0 9.63068 0.00538693 9.51927 0.0146484 9.40918C0.00563418 9.29576 7.49779e-06 9.18117 0 9.06543C0 6.69938 1.91817 4.78127 4.28418 4.78125C4.46476 4.78126 4.64268 4.79275 4.81738 4.81445C5.70979 3.32391 7.34052 2.32633 9.2041 2.32617ZM9.2041 3.52539C7.77983 3.52555 6.53145 4.28786 5.84668 5.43164L5.44531 6.10156L4.66992 6.00586C4.53994 5.9897 4.41129 5.98048 4.28418 5.98047C2.6345 5.98048 1.28692 7.27669 1.2041 8.90625L1.2002 9.06543C1.2002 9.14467 1.20305 9.22752 1.20996 9.31445L1.21777 9.41211L1.20996 9.50977L1.2002 9.74316C1.20023 11.2514 2.42259 12.4744 3.93066 12.4746H12.0684C13.5297 12.4746 14.7226 11.3265 14.7959 9.88379L14.7998 9.74316C14.7998 8.78847 14.3094 7.94732 13.5605 7.45703L13.1377 7.17969L13.04 6.68262C12.6894 4.8834 11.104 3.52539 9.2041 3.52539ZM6.79688 6.74121C6.93478 6.61179 7.13694 6.57633 7.31055 6.65137C7.48407 6.72651 7.59654 6.89783 7.59668 7.08691V10.749C7.59642 11.0109 7.38396 11.2235 7.12207 11.2236C6.86013 11.2236 6.64772 11.0109 6.64746 10.749V8.18457L6.05859 8.73828C5.86754 8.91775 5.5662 8.90785 5.38672 8.7168C5.20757 8.52576 5.21736 8.2253 5.4082 8.0459L6.79688 6.74121ZM8.87793 6.6123C9.14003 6.61235 9.35254 6.82578 9.35254 7.08789V9.65137L9.94141 9.09863C10.1325 8.91917 10.4338 8.92809 10.6133 9.11914C10.7925 9.31017 10.7827 9.61061 10.5918 9.79004L9.20312 11.0947C9.0652 11.2242 8.86308 11.2596 8.68945 11.1846C8.51588 11.1094 8.40339 10.9382 8.40332 10.749V7.08789C8.40332 6.82582 8.61588 6.61241 8.87793 6.6123Z" fill="currentColor"/>
+</svg>
\ No newline at end of file
diff --git a/src/components/_base/breadcrumb/index.vue b/src/components/_base/breadcrumb/index.vue
index e923879..b5539c7 100644
--- a/src/components/_base/breadcrumb/index.vue
+++ b/src/components/_base/breadcrumb/index.vue
@@ -37,7 +37,7 @@ const matched = computed(() => {
   </a-breadcrumb> -->
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .container-breadcrumb {
   margin: 16px 0;
   :deep(.arco-breadcrumb-item) {
diff --git a/src/components/_base/exit-account-modal/index.vue b/src/components/_base/exit-account-modal/index.vue
index 030e470..b100121 100644
--- a/src/components/_base/exit-account-modal/index.vue
+++ b/src/components/_base/exit-account-modal/index.vue
@@ -17,7 +17,7 @@
     </div>
     <p class="m-0 p-0 mb-24px s2 ml-32px">退出登录后，你将无法收到该账号的通知</p>
     <div class="flex items-center justify-end">
-      <a-button class="cancel-btn" size="medium" @click="onClose">返回</a-button>
+      <a-button class="!rounded-4px" size="medium" @click="onClose">返回</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="medium" @click="onLogout"
         >退出登录</a-button
       >
@@ -67,7 +67,7 @@ defineExpose({ open });
     padding: 24px;
     .s1 {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -75,7 +75,7 @@ defineExpose({ open });
     }
     .s2 {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -83,15 +83,12 @@ defineExpose({ open });
     }
     .cancel-btn {
       border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
     }
     .danger-btn {
-      border-radius: 4px;
       background: var(--Functional-Danger-6, #f64b31) !important;
-      border: none !important;
+      &:hover {
+        background: var(--Functional-Danger-6, #f64b31) !important;
+      }
     }
   }
 }
diff --git a/src/components/_base/menu/index.vue b/src/components/_base/menu/index.vue
index 7083b5e..04c296b 100644
--- a/src/components/_base/menu/index.vue
+++ b/src/components/_base/menu/index.vue
@@ -170,7 +170,7 @@ export default defineComponent({
     }
     .arco-menu-title {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
@@ -194,7 +194,7 @@ export default defineComponent({
     border-radius: 8px;
     .arco-menu-item-inner {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 16px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/components/_base/navbar/components/navbar-menu/index.vue b/src/components/_base/navbar/components/navbar-menu/index.vue
new file mode 100644
index 0000000..7c33508
--- /dev/null
+++ b/src/components/_base/navbar/components/navbar-menu/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="navbar-menu h-100%">
+    <a-menu mode="horizontal" :selected-keys="selectedKey">
+      <a-menu-item v-for="item in menuList" :key="String(item.id)">
+        <template v-if="item.children">
+          <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
+            <a-button type="text">
+              <span class="menu-item-text mr-2px"> {{ item.name }}</span>
+              <icon-caret-down size="16" class="arco-icon-down !mr-0" />
+            </a-button>
+            <template #content>
+              <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDropdownClick(child)">
+                <span class="menu-item-text"> {{ child.name }}</span>
+              </a-doption>
+            </template>
+          </a-dropdown>
+        </template>
+        <template v-else>
+          <a-menu-item :key="String(item.id)" @click="handleDropdownClick(item)">
+            <span class="menu-item-text"> {{ item.name }}</span>
+          </a-menu-item>
+        </template>
+      </a-menu-item>
+    </a-menu>
+  </div>
+</template>
+
+<script setup>
+import { useSidebarStore } from '@/stores/modules/side-bar';
+import router from '@/router';
+
+const sidebarStore = useSidebarStore();
+
+const selectedKey = computed(() => {
+  return [String(sidebarStore.activeMenuId)];
+});
+const menuList = computed(() => {
+  return sidebarStore.menuList;
+});
+const handleDropdownClick = (item) => {
+  router.push({ name: item.routeName });
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
+<style lang="scss">
+.layout-menu-item-dropdown {
+  .arco-dropdown {
+    border-radius: 8px;
+    border: 1px solid var(--BG-300, #e6e6e8);
+    background: var(--BG-white, #fff);
+    padding: 12px 0px;
+    .arco-dropdown-option {
+      padding: 0 12px;
+      margin-bottom: 4px;
+      &-content {
+        display: flex;
+        height: 40px;
+        width: 100%;
+        padding: 10px 24px;
+        align-items: center;
+        .menu-item-text {
+          color: var(--Text-2, #3c4043);
+          font-family: 'PuHuiTi-Regular';
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 137.5% */
+        }
+      }
+      &:not(.arco-dropdown-option-disabled):hover {
+        background-color: transparent;
+        .arco-dropdown-option-content {
+          border-radius: 8px;
+          background: var(--BG-200, #f2f3f5);
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/_base/navbar/components/navbar-menu/style.scss b/src/components/_base/navbar/components/navbar-menu/style.scss
new file mode 100644
index 0000000..5a15e33
--- /dev/null
+++ b/src/components/_base/navbar/components/navbar-menu/style.scss
@@ -0,0 +1,45 @@
+.navbar-menu {
+  display: flex;
+  align-items: center;
+  margin-left: 40px;
+  .menu-item-text {
+    color: var(--Text-2, #3c4043);
+    font-family: $font-family-medium;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  :deep(.arco-menu) {
+    height: 100%;
+    .arco-menu-inner {
+      padding: 0 20px;
+    }
+    .arco-menu-item {
+      padding: 0;
+      position: relative;
+      &.arco-menu-selected {
+        .menu-item-text,
+        .arco-menu-selected-label {
+          color: #6d4cfe;
+        }
+        .arco-menu-selected-label {
+          background: var(--Brand-Brand-6, #6d4cfe);
+          height: 4px;
+          border-radius: 4px;
+          width: 50%;
+          position: absolute;
+          bottom: -8px;
+          left: 50%;
+          transform: translateX(-50%);
+        }
+      }
+    }
+  }
+  .arco-icon-down {
+    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  }
+  .arco-dropdown-open .arco-icon-down {
+    transform: rotate(180deg);
+  }
+}
diff --git a/src/components/_base/navbar/components/right-side/index.vue b/src/components/_base/navbar/components/right-side/index.vue
new file mode 100644
index 0000000..4f187dd
--- /dev/null
+++ b/src/components/_base/navbar/components/right-side/index.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="right-wrap">
+    <div class="relative mr-12px" @click="setUnread">
+      <SvgIcon
+        name="svg-taskCenter"
+        size="16"
+        class="cursor-pointer color-#737478 hover:color-#6D4CFE"
+        @click="openDownloadCenter"
+      />
+      <div class="w-4px h-4px rounded-50% bg-#F64B31 absolute top-1px right-1px" v-if="hasUnreadInfo"></div>
+    </div>
+
+    <a-dropdown trigger="click" class="layout-avatar-dropdown">
+      <a-avatar class="cursor-pointer" :size="32">
+        <img alt="avatar" src="@/assets/avatar.svg" />
+      </a-avatar>
+      <template #content>
+        <div>
+          <a-doption>
+            <a-space class="flex justify-between w-100%" @click="setServerMenu">
+              <div class="flex items-center">
+                <img :src="icon1" class="w-16px h-16px mr-8px" />
+                <span>管理中心</span>
+              </div>
+              <icon-right size="12" />
+            </a-space>
+          </a-doption>
+          <a-dsubmenu value="option-1" position="lt" trigger="hover" class="enterprises-dsubmenu">
+            <a-doption class="enterprises-doption">
+              <a-space class="flex justify-between w-100%">
+                <div class="flex items-center">
+                  <img :src="icon3" class="w-16px h-16px mr-8px" />
+                  <span>切换企业账号</span>
+                </div>
+                <icon-right size="12" />
+              </a-space>
+            </a-doption>
+            <template #content>
+              <a-doption
+                v-for="(item, index) in enterprises"
+                :key="index"
+                class="rounded-8px hover:bg-#F2F3F5"
+                @click="onEnterpriseItemClick(item)"
+              >
+                <div
+                  class="flex items-center w-100% justify-between"
+                  :class="enterpriseInfo?.id === item.id ? '!color-#6D4CFE' : ''"
+                >
+                  <span>{{ item.name }}</span>
+                  <icon-check v-if="enterpriseInfo?.id === item.id" size="16" />
+                </div>
+              </a-doption>
+            </template>
+          </a-dsubmenu>
+          <a-doption>
+            <a-space class="flex justify-between w-100%" @click="clickExit">
+              <div class="flex items-center">
+                <img :src="icon2" class="w-16px h-16px mr-8px" />
+                <span>退出登录</span>
+              </div>
+              <icon-right size="12" />
+            </a-space>
+          </a-doption>
+        </div>
+      </template>
+    </a-dropdown>
+
+    <ExitAccountModal ref="exitAccountModalRef" />
+    <DownloadCenterModal ref="downloadCenterModalRef" />
+  </div>
+</template>
+
+<script setup>
+import router from '@/router';
+import { useEnterpriseStore } from '@/stores/modules/enterprise';
+import { useSidebarStore } from '@/stores/modules/side-bar';
+import { useUserStore } from '@/stores';
+
+import ExitAccountModal from '@/components/_base/exit-account-modal';
+import DownloadCenterModal from '../task-center-modal';
+
+import icon1 from '@/assets/option.svg';
+import icon2 from '@/assets/exit.svg';
+import icon3 from '@/assets/change.svg';
+
+const enterpriseStore = useEnterpriseStore();
+const userStore = useUserStore();
+const sideBarStore = useSidebarStore();
+
+const hasUnreadInfo = computed(() => sideBarStore.unreadInfo.length);
+
+const exitAccountModalRef = ref(null);
+const downloadCenterModalRef = ref(null);
+
+const enterprises = computed(() => {
+  return userStore.userInfo?.enterprises ?? [];
+});
+const enterpriseInfo = computed(() => {
+  return enterpriseStore?.enterpriseInfo ?? {};
+});
+
+const openDownloadCenter = () => {
+  downloadCenterModalRef.value.open();
+};
+const onEnterpriseItemClick = async (item) => {
+  enterpriseStore.setEnterpriseInfo(item);
+  window.location.reload();
+};
+const clickExit = async () => {
+  exitAccountModalRef.value?.open();
+};
+const setServerMenu = () => {
+  router.push('/management/person');
+};
+const setUnread = () => {
+  if (sideBarStore.unreadInfo.length) {
+    sideBarStore.removeTaskUnreadInfo();
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.right-wrap {
+  display: flex;
+  padding-right: 20px;
+  list-style: none;
+  align-items: center;
+}
+</style>
+<style lang="scss">
+.layout-avatar-dropdown,
+.enterprises-dsubmenu {
+  .arco-dropdown {
+    border-radius: 8px;
+    border: 1px solid var(--BG-300, #e6e6e8);
+    background: var(--BG-white, #fff);
+    padding: 12px 0px;
+    .arco-dropdown-option {
+      padding: 0 12px;
+      margin-bottom: 4px;
+      &-content {
+        display: flex;
+        height: 40px;
+        width: 100%;
+        padding: 10px 24px;
+        align-items: center;
+        .menu-item-text {
+          color: var(--Text-2, #3c4043);
+          font-family: $font-family-regular;
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px;
+        }
+      }
+      .arco-dropdown-option-content {
+        border-radius: 8px !important;
+      }
+      &:not(.arco-dropdown-option-disabled):hover {
+        background-color: transparent;
+        .arco-dropdown-option-content {
+          background: var(--BG-200, #f2f3f5);
+        }
+      }
+    }
+  }
+}
+.layout-avatar-dropdown,
+.enterprises-dsubmenu {
+  width: 200px;
+  .arco-dropdown {
+    padding: 12px 4px;
+    .arco-dropdown-option {
+      padding: 0 !important;
+      &-content {
+        padding: 0 12px !important;
+      }
+    }
+  }
+  .arco-dropdown-option-suffix {
+    display: none;
+  }
+  .enterprises-doption {
+    .arco-dropdown-option-content {
+      padding: 0 !important;
+      border-radius: 8px;
+    }
+    &:not(.arco-dropdown-option-disabled):hover {
+      background-color: transparent;
+      .arco-dropdown-option-content {
+        background: var(--BG-200, #f2f3f5);
+      }
+    }
+  }
+}
+</style>
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/constants.ts b/src/components/_base/navbar/components/task-center-modal/components/export-task/constants.ts
new file mode 100644
index 0000000..1134c9a
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/export-task/constants.ts
@@ -0,0 +1,38 @@
+export const INITIAL_FORM = {
+  type: 1,
+  operator_name: '',
+  module: '',
+  sort_column: undefined,
+  sort_order: undefined,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '文件名称',
+    dataIndex: 'name',
+    width: 180,
+  },
+  {
+    title: '所属模块',
+    dataIndex: 'module',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'created_at',
+    width: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'operator.name',
+    width: 150,
+  },
+];
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue b/src/components/_base/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue
new file mode 100644
index 0000000..e28a39a
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/export-task/delete-task-modal.vue
@@ -0,0 +1,62 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isBatch ? '批量删除下载记录' : '删除下载记录'"
+    width="400px"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ accountName }} 这条记录吗？</span>
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
+        >确定</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteTask, deleteBatchTasks } from '@/api/all/common';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['update', 'close', 'batchUpdate']);
+
+const visible = ref(false);
+const taskId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(taskId.value));
+
+function onClose() {
+  visible.value = false;
+  taskId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  taskId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
+  const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
+
+  const { code } = await _fn(_params);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    isBatch.value ? emits('batchUpdate') : emits('update');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/index.vue b/src/components/_base/navbar/components/task-center-modal/components/export-task/index.vue
new file mode 100644
index 0000000..3e1a3bf
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/export-task/index.vue
@@ -0,0 +1,386 @@
+<script lang="jsx">
+import { ref, computed } from 'vue';
+import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
+import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+import NoData from '@/components/no-data';
+import { getTask, postRedoTask, postBatchDownload, batchQueryTaskStatus } from '@/api/all/common';
+import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
+import { EXPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
+import { formatTableField, exactFormatTime, genRandomId } from '@/utils/tools';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { downloadByUrl } from '@/utils/tools';
+import DeleteTaskModal from './delete-task-modal.vue';
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+import { showExportNotification, showFailExportNotification } from '@/utils/arcoD';
+
+export default {
+  setup(props, { emit, expose }) {
+    const {
+      selectedRowKeys,
+      selectedRows,
+      dataSource,
+      pageInfo,
+      onPageChange,
+      onPageSizeChange,
+      rowSelection,
+      handleSelect,
+      handleSelectAll,
+      DEFAULT_PAGE_INFO,
+    } = useTableSelectionWithPagination({
+      onPageChange: () => {
+        getData();
+      },
+      onPageSizeChange: () => {
+        getData();
+      },
+    });
+    let queryTaskTimer = null;
+
+    const query = ref(cloneDeep(INITIAL_FORM));
+    const deleteTaskModalRef = ref(null);
+    const downloadTaskInfos = ref([]);
+
+    const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
+    const indeterminate = computed(
+      () => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
+    );
+
+    const reset = () => {
+      query.value = cloneDeep(INITIAL_FORM);
+      pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO);
+      selectedRowKeys.value = [];
+      selectedRows.value = [];
+      dataSource.value = [];
+      downloadTaskInfos.value = [];
+    };
+
+    const init = () => {
+      getData();
+    };
+
+    const getData = async () => {
+      const { page, page_size } = pageInfo.value;
+      const { code, data } = await getTask({
+        ...query.value,
+        page,
+        page_size,
+      });
+      if (code === 200) {
+        dataSource.value = data?.data ?? [];
+        pageInfo.value.total = data?.total;
+      }
+    };
+    const reload = () => {
+      pageInfo.value.page = 1;
+      getData();
+    };
+
+    const handleSorterChange = (column, order) => {
+      query.value.sort_column = column;
+      query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
+      reload();
+    };
+
+    const handleSearch = () => {
+      reload();
+    };
+
+    const clearSelectedRows = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+    };
+
+    const handleDownload = async (record) => {
+      if (record.status === enumTaskStatus.Failed) {
+        const { code } = await postRedoTask(record.id);
+        if (code === 200) {
+          showExportNotification(`正在下载“${record.name}”，请稍后...`);
+          getData();
+        }
+      } else {
+        record.file && downloadByUrl(record.file);
+      }
+    };
+
+    // 批量下载
+    const handleBatchDownload = debounce(async () => {
+      const { code, data } = await postBatchDownload({ ids: selectedRowKeys.value });
+      if (code === 200) {
+        startBatchDownload(data.id);
+      }
+    }, 500);
+    const startBatchDownload = (id) => {
+      const randomId = genRandomId();
+      showExportNotification(
+        `正在批量下载“${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件，请稍后...`,
+        {
+          duration: 0,
+          id: randomId,
+        },
+      );
+      downloadTaskInfos.value.push({
+        id,
+        randomId,
+      });
+
+      if (!queryTaskTimer) {
+        queryTaskTimer = setInterval(() => getSyncTaskStatus(), 3000);
+      }
+    };
+    const getSyncTaskStatus = async () => {
+      const { code, data } = await batchQueryTaskStatus({ ids: downloadTaskInfos.value.map((v) => v.id) });
+      if (code === 200) {
+        let completeTaskNum = 0;
+        data.forEach((item) => {
+          const { status, file, id } = item;
+          if (status !== 0) {
+            completeTaskNum++;
+
+            const notificationId = downloadTaskInfos.value.find((v) => v.id === id)?.randomId;
+            notificationId && Notification.remove(notificationId);
+
+            if (status === 1) {
+              AMessage.success('批量下载已完成，正在下载文件...');
+              downloadByUrl(file);
+            } else if (status === 2) {
+              const onReDownload = () => {
+                startBatchDownload(id);
+              };
+              showFailExportNotification(
+                `${selectedRows.value[0]?.name}”等${selectedRows.value.length}个文件下载失败`,
+                { onReDownload },
+              );
+            }
+
+            // 结束的任务过滤掉
+            downloadTaskInfos.value = downloadTaskInfos.value.filter((v) => v.id !== id);
+          }
+        });
+
+        // 全部完成了
+        if (completeTaskNum === data.length) {
+          clearQueryTaskTimer();
+          clearSelectedRows();
+          downloadTaskInfos.value = [];
+        }
+      }
+    };
+
+    const handleDelete = (record) => {
+      const { id, name } = record;
+      deleteTaskModalRef.value.open({
+        id,
+        name: `“${name || '-'}”`,
+      });
+    };
+    const handleBatchDelete = () => {
+      const ids = selectedRows.value.map((item) => item.id);
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
+
+      deleteTaskModalRef.value?.open({ id: ids, name: names });
+    };
+
+    const onBatchSuccess = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+      getData();
+    };
+
+    const clearQueryTaskTimer = () => {
+      if (queryTaskTimer) {
+        clearInterval(queryTaskTimer);
+        queryTaskTimer = null;
+      }
+    };
+    const unloadComp = () => {
+      clearQueryTaskTimer();
+    };
+    onUnmounted(() => {
+      clearQueryTaskTimer;
+    });
+
+    expose({ init, reset, unloadComp });
+
+    return () => (
+      <div class="export-task-wrap">
+        {/* 筛选行 */}
+        <div class="filter-row flex mb-16px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">操作人员</span>
+            <Input
+              v-model={query.value.operator_name}
+              class="w-240px"
+              placeholder="请输入操作人员"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">所属模块</span>
+            <Input
+              v-model={query.value.module}
+              class="w-240px"
+              placeholder="请输入所属模块"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+        </div>
+
+        {/* 已选提示行 */}
+        {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
+          <div
+            class={[
+              'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
+              selectedRows.value.length > 0 ? ' selected' : '',
+            ].join('')}
+          >
+            <div class="flex items-center">
+              <div class="flex items-center">
+                <Checkbox
+                  modelValue={checkedAll.value}
+                  indeterminate={indeterminate.value}
+                  class="mr-8px"
+                  onChange={handleSelectAll}
+                />
+                <span class="label mr-24px">
+                  已选
+                  <span class="color-#6D4CFE">{selectedRows.value.length}</span>
+                  个文件
+                </span>
+                <span class="operation-btn" onClick={handleBatchDownload}>
+                  批量下载
+                </span>
+                <span class="operation-btn red" onClick={handleBatchDelete}>
+                  批量删除
+                </span>
+              </div>
+            </div>
+            <IconClose size={16} class="cursor-pointer color-#737478" onClick={clearSelectedRows} />
+          </div>
+        )}
+
+        {/* 表格 */}
+        <Table
+          ref="tableRef"
+          data={dataSource.value}
+          column-resizable
+          row-key="id"
+          row-selection={rowSelection.value}
+          selected-keys={selectedRowKeys.value}
+          pagination={false}
+          scroll={{ x: '100%', y: '100%' }}
+          class="w-100% flex-1 overflow-hidden"
+          bordered
+          onSorterChange={handleSorterChange}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+          v-slots={{
+            empty: () => <NoData />,
+            columns: () => (
+              <>
+                {TABLE_COLUMNS.map((column) => (
+                  <TableColumn
+                    key={column.dataIndex}
+                    data-index={column.dataIndex}
+                    fixed={column.fixed}
+                    width={column.width}
+                    min-width={column.minWidth}
+                    sortable={column.sortable}
+                    align={column.align}
+                    ellipsis
+                    tooltip
+                    v-slots={{
+                      title: () => (
+                        <div class="flex items-center">
+                          <span class="cts mr-4px">{column.title}</span>
+                          {column.tooltip && (
+                            <Tooltip content={column.tooltip} position="top">
+                              <IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
+                            </Tooltip>
+                          )}
+                        </div>
+                      ),
+                      cell: ({ record }) => {
+                        if (column.dataIndex === 'status') {
+                          return (
+                            <div class={['status-box', `status-box-${record.status}`]}>
+                              <span>{EXPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
+                            </div>
+                          );
+                        } else if (column.dataIndex === 'operator.name') {
+                          return record.operator?.name || record.operator?.mobile;
+                        } else if (column.dataIndex === 'created_at') {
+                          return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+                        } else {
+                          return formatTableField(column, record, true);
+                        }
+                      },
+                    }}
+                  />
+                ))}
+                <TableColumn
+                  data-index="operation"
+                  width={dataSource.value.some((record) => record.status !== enumTaskStatus.Exporting) ? 120 : 60}
+                  fixed="right"
+                  title="操作"
+                  v-slots={{
+                    cell: ({ record }) => (
+                      <div class="flex items-center">
+                        <img
+                          src={icon1}
+                          width="14"
+                          height="14"
+                          class="mr-8px cursor-pointer"
+                          onClick={() => handleDelete(record)}
+                        />
+                        {record.status !== enumTaskStatus.Exporting && (
+                          <Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
+                            {record.status === enumTaskStatus.Failed ? '重新导出' : '下载'}
+                          </Button>
+                        )}
+                      </div>
+                    ),
+                  }}
+                />
+              </>
+            ),
+          }}
+        />
+
+        {/* 分页 */}
+        {pageInfo.value.total > 0 && (
+          <div class="flex justify-end my-16px">
+            <Pagination
+              total={pageInfo.value.total}
+              size="mini"
+              show-total
+              show-jumper
+              show-page-size
+              current={pageInfo.value.page}
+              page-size={pageInfo.value.page_size}
+              onChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        )}
+
+        {/* 删除弹窗 */}
+        <DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
diff --git a/src/components/_base/navbar/components/task-center-modal/components/export-task/style.scss b/src/components/_base/navbar/components/task-center-modal/components/export-task/style.scss
new file mode 100644
index 0000000..6fe18d5
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/export-task/style.scss
@@ -0,0 +1,86 @@
+.export-task-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tip-row {
+    border-radius: 2px;
+    background: #f0edff;
+    .label {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.normal {
+      background: #ebf7f2;
+      .label {
+        color: #211f24;
+      }
+    }
+    &.abnormal {
+      background: #ffe7e4;
+      .label {
+        color: #211f24;
+      }
+    }
+    .err-btn {
+      background-color: #f64b31 !important;
+      color: var(--BG-white, #fff);
+      font-family: 'PingFang SC';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px;
+    }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #f64b31;
+      }
+    }
+  }
+  .status-box {
+    border-radius: 2px;
+    display: flex;
+    height: 24px;
+    padding: 0px 8px;
+    align-items: center;
+    width: fit-content;
+    span {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; 
+    }
+    &-0 {
+      background: var(--Functional-yellow-1, #fff7e5);
+      span {
+        color: var(--Functional-yellow-6, #ffae00);
+      }
+    }
+    &-1 {
+      background: var(--Functional-Green-1, #ebf7f2);
+      span {
+        color: var(--Functional-Green-6, #25c883);
+      }
+    }
+    &-2 {
+      background: var(--Functional-Red-1, #ffe9e7);
+      span {
+        color: var(--Functional-Red-6, #f64b31);
+      }
+    }
+  }
+}
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/constants.ts b/src/components/_base/navbar/components/task-center-modal/components/import-task/constants.ts
new file mode 100644
index 0000000..633bb88
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/import-task/constants.ts
@@ -0,0 +1,53 @@
+export const INITIAL_FORM = {
+  type: 0,
+  operator_name: '',
+  module: '',
+  sort_column: undefined,
+  sort_order: undefined,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '任务名称',
+    dataIndex: 'name',
+    width: 180,
+  },
+  {
+    title: '所属模块',
+    dataIndex: 'module',
+    width: 120,
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 100,
+  },
+  {
+    title: '共导入',
+    dataIndex: 'total_number',
+    width: 100,
+  },
+  {
+    title: '导入成功',
+    dataIndex: 'success_number',
+    width: 100,
+  },
+  {
+    title: '导入失败',
+    dataIndex: 'fail_number',
+    width: 100,
+  },
+  {
+    title: '导入时间',
+    dataIndex: 'created_at',
+    width: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作人员',
+    dataIndex: 'operator.name',
+    width: 150,
+  },
+];
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue b/src/components/_base/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue
new file mode 100644
index 0000000..1c7c09e
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/import-task/delete-task-modal.vue
@@ -0,0 +1,61 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isBatch ? '批量删除导入记录' : '删除导入记录'"
+    width="400px"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ accountName }} 这条记录吗？</span>
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px !bg-#f64b31 !border-none" status="danger" size="large" @click="onDelete"
+        >确定</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteTask, deleteBatchTasks } from '@/api/all/common';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['update', 'close', 'batchUpdate']);
+
+const visible = ref(false);
+const taskId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(taskId.value));
+
+function onClose() {
+  visible.value = false;
+  taskId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  taskId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch.value ? deleteBatchTasks : deleteTask;
+  const _params = isBatch.value ? { ids: taskId.value } : taskId.value;
+  const { code } = await _fn(_params);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    isBatch.value ? emits('batchUpdate') : emits('update');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/index.vue b/src/components/_base/navbar/components/task-center-modal/components/import-task/index.vue
new file mode 100644
index 0000000..05de549
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/import-task/index.vue
@@ -0,0 +1,300 @@
+<script lang="jsx">
+import { ref, computed } from 'vue';
+import { Input, Table, TableColumn, Checkbox, Pagination, Button, Tooltip, Notification } from '@arco-design/web-vue';
+import { IconSearch, IconClose, IconQuestionCircle } from '@arco-design/web-vue/es/icon';
+import NoData from '@/components/no-data';
+import { getTask } from '@/api/all/common';
+import { INITIAL_FORM, TABLE_COLUMNS } from './constants';
+import { IMPORT_TASK_STATUS, enumTaskStatus } from '../../constants';
+import { formatTableField, exactFormatTime } from '@/utils/tools';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { downloadByUrl } from '@/utils/tools';
+import DeleteTaskModal from './delete-task-modal.vue';
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+// import { showExportNotification } from '@/utils/arcoD';
+
+export default {
+  setup(props, { emit, expose }) {
+    const {
+      selectedRowKeys,
+      selectedRows,
+      dataSource,
+      pageInfo,
+      onPageChange,
+      onPageSizeChange,
+      rowSelection,
+      handleSelect,
+      handleSelectAll,
+      DEFAULT_PAGE_INFO,
+    } = useTableSelectionWithPagination({
+      onPageChange: () => {
+        getData();
+      },
+      onPageSizeChange: () => {
+        getData();
+      },
+    });
+
+    const query = ref({ ...INITIAL_FORM });
+    const deleteTaskModalRef = ref(null);
+
+    const checkedAll = computed(() => selectedRows.value.length === dataSource.value.length);
+    const indeterminate = computed(
+      () => selectedRows.value.length > 0 && selectedRows.value.length < dataSource.value.length,
+    );
+
+    const reset = () => {
+      query.value = { ...INITIAL_FORM };
+      pageInfo.value = { ...DEFAULT_PAGE_INFO };
+      selectedRowKeys.value = [];
+      selectedRows.value = [];
+      dataSource.value = [];
+    };
+
+    const init = () => {
+      getData();
+    };
+
+    const getData = async () => {
+      const { page, page_size } = pageInfo.value;
+      const { code, data } = await getTask({
+        ...query.value,
+        page,
+        page_size,
+      });
+      if (code === 200) {
+        dataSource.value = data?.data ?? [];
+        pageInfo.value.total = data?.total;
+      }
+    };
+    const reload = () => {
+      pageInfo.value.page = 1;
+      getData();
+    };
+
+    const handleSorterChange = (column, order) => {
+      query.value.sort_column = column;
+      query.value.sort_order = order === 'ascend' ? 'asc' : 'desc';
+      reload();
+    };
+
+    const handleSearch = () => {
+      reload();
+    };
+
+    const handleCloseTip = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+    };
+
+    const handleDownload = (record) => {
+      downloadByUrl(record.file);
+      // showExportNotification(`正在下载“${record.name}”，请稍后...`)
+    };
+    const handleBatchDownload = () => {
+      // 批量下载逻辑
+    };
+
+    const handleDelete = (record) => {
+      const { id, name } = record;
+      deleteTaskModalRef.value.open({
+        id,
+        name: `“${name || '-'}”`,
+      });
+    };
+    const handleBatchDelete = () => {
+      const ids = selectedRows.value.map((item) => item.id);
+      const names = selectedRows.value.map((item) => `"${item.name || '-'}` + '"').join('，');
+      deleteTaskModalRef.value?.open({ id: ids, name: names });
+    };
+
+    const onBatchSuccess = () => {
+      selectedRows.value = [];
+      selectedRowKeys.value = [];
+      getData();
+    };
+    
+    expose({ init, reset });
+
+    return () => (
+      <div class="import-task-wrap">
+        {/* 筛选行 */}
+        {/* <div class="filter-row flex mb-16px">
+          <div class="filter-row-item flex items-center">
+            <span class="label">操作人员</span>
+            <Input
+              v-model={query.value.operator_name}
+              class="w-240px"
+              placeholder="请输入操作人员"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+          <div class="filter-row-item flex items-center">
+            <span class="label">所属模块</span>
+            <Input
+              v-model={query.value.module}
+              class="w-240px"
+              placeholder="请输入所属模块"
+              size="medium"
+              allow-clear
+              onChange={handleSearch}
+              v-slots={{
+                prefix: () => <IconSearch />,
+              }}
+            />
+          </div>
+        </div> */}
+
+        {/* 已选提示行 */}
+        {/* {dataSource.value.length > 0 && selectedRows.value.length > 0 && (
+          <div
+            class={[
+              'tip-row flex justify-between px-16px py-10px w-100% mb-16px h-42px',
+              selectedRows.value.length > 0 ? ' selected' : '',
+            ].join('')}
+          >
+            <div class="flex items-center">
+              <div class="flex items-center">
+                <Checkbox
+                  modelValue={checkedAll.value}
+                  indeterminate={indeterminate.value}
+                  class="mr-8px"
+                  onChange={handleSelectAll}
+                />
+                <span class="label mr-24px">
+                  已选
+                  <span class="color-#6D4CFE">{selectedRows.value.length}</span>
+                  个文件
+                </span>
+                <span class="operation-btn" onClick={handleBatchDownload}>
+                  批量下载
+                </span>
+                <span class="operation-btn red" onClick={handleBatchDelete}>
+                  批量删除
+                </span>
+              </div>
+            </div>
+            <IconClose size={16} class="cursor-pointer color-#737478" onClick={handleCloseTip} />
+          </div>
+        )} */}
+
+        {/* 表格 */}
+        <Table
+          ref="tableRef"
+          data={dataSource.value}
+          column-resizable
+          row-key="id"
+          selected-keys={selectedRowKeys.value}
+          pagination={false}
+          scroll={{ x: '100%', y: '100%' }}
+          class="w-100% flex-1 overflow-hidden"
+          bordered
+          onSorterChange={handleSorterChange}
+          onSelect={handleSelect}
+          onSelectAll={handleSelectAll}
+          v-slots={{
+            empty: () => <NoData />,
+            columns: () => (
+              <>
+                {TABLE_COLUMNS.map((column) => (
+                  <TableColumn
+                    key={column.dataIndex}
+                    data-index={column.dataIndex}
+                    fixed={column.fixed}
+                    width={column.width}
+                    min-width={column.minWidth}
+                    sortable={column.sortable}
+                    align={column.align}
+                    ellipsis
+                    tooltip
+                    v-slots={{
+                      title: () => (
+                        <div class="flex items-center">
+                          <span class="cts mr-4px">{column.title}</span>
+                          {column.tooltip && (
+                            <Tooltip content={column.tooltip} position="top">
+                              <IconQuestionCircle class="tooltip-icon color-#737478" size={16} />
+                            </Tooltip>
+                          )}
+                        </div>
+                      ),
+                      cell: ({ record }) => {
+                        if (column.dataIndex === 'status') {
+                          return (
+                            <div class={['status-box', `status-box-${record.status}`]}>
+                              <span>{IMPORT_TASK_STATUS.find((v) => v.value === record.status)?.label}</span>
+                            </div>
+                          );
+                        } else if (column.dataIndex === 'operator.name') {
+                          return <span>{record.operator?.name || record.operator?.mobile}</span>;
+                        } else if (column.dataIndex === 'created_at') {
+                          return exactFormatTime(record.created_at, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+                        } else {
+                          return formatTableField(column, record, true);
+                        }
+                      },
+                    }}
+                  />
+                ))}
+                <TableColumn
+                  data-index="operation"
+                  width={dataSource.value.some((record) => record.status === enumTaskStatus.Failed) ? 180 : 60}
+                  fixed="right"
+                  title="操作"
+                  v-slots={{
+                    cell: ({ record }) => (
+                      <div class="flex items-center">
+                        <img
+                          src={icon1}
+                          width="14"
+                          height="14"
+                          class="mr-8px cursor-pointer"
+                          onClick={() => handleDelete(record)}
+                        />
+                        {record.status === enumTaskStatus.Failed && (
+                          <Button type="outline" size="mini" class="search-btn" onClick={() => handleDownload(record)}>
+                            下载问题表格
+                          </Button>
+                        )}
+                      </div>
+                    ),
+                  }}
+                />
+              </>
+            ),
+          }}
+        />
+
+        {/* 分页 */}
+        {pageInfo.value.total > 0 && (
+          <div class="flex justify-end my-16px">
+            <Pagination
+              total={pageInfo.value.total}
+              size="mini"
+              show-total
+              show-jumper
+              show-page-size
+              current={pageInfo.value.page}
+              page-size={pageInfo.value.page_size}
+              onChange={onPageChange}
+              onPageSizeChange={onPageSizeChange}
+            />
+          </div>
+        )}
+
+        {/* 删除弹窗 */}
+        <DeleteTaskModal ref={deleteTaskModalRef} onBatchUpdate={onBatchSuccess} onUpdate={getData} />
+      </div>
+    );
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
diff --git a/src/components/_base/navbar/components/task-center-modal/components/import-task/style.scss b/src/components/_base/navbar/components/task-center-modal/components/import-task/style.scss
new file mode 100644
index 0000000..216880a
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/components/import-task/style.scss
@@ -0,0 +1,86 @@
+.import-task-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tip-row {
+    border-radius: 2px;
+    background: #f0edff;
+    .label {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    &.normal {
+      background: #ebf7f2;
+      .label {
+        color: #211f24;
+      }
+    }
+    &.abnormal {
+      background: #ffe7e4;
+      .label {
+        color: #211f24;
+      }
+    }
+    .err-btn {
+      background-color: #f64b31 !important;
+      color: var(--BG-white, #fff);
+      font-family: 'PingFang SC';
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 20px; 
+    }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: $font-family-regular;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; 
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #f64b31;
+      }
+    }
+  }
+  .status-box {
+    border-radius: 2px;
+    display: flex;
+    height: 24px;
+    padding: 0px 8px;
+    align-items: center;
+    width: fit-content;
+    span {
+      font-family: $font-family-medium;
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; 
+    }
+    &-0 {
+      background: var(--Functional-yellow-1, #fff7e5);
+      span {
+        color: var(--Functional-yellow-6, #ffae00);
+      }
+    }
+    &-1 {
+      background: var(--Functional-Green-1, #ebf7f2);
+      span {
+        color: var(--Functional-Green-6, #25c883);
+      }
+    }
+    &-2 {
+      background: var(--Functional-Red-1, #ffe9e7);
+      span {
+        color: var(--Functional-Red-6, #f64b31);
+      }
+    }
+  }
+}
diff --git a/src/components/_base/navbar/components/task-center-modal/constants.ts b/src/components/_base/navbar/components/task-center-modal/constants.ts
new file mode 100644
index 0000000..63ceaa0
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/constants.ts
@@ -0,0 +1,34 @@
+export enum enumTaskStatus {
+  Exporting = 0, // 导出中
+  Finished = 1, // 已完成
+  Failed = 2, // 导出失败
+}
+
+export const EXPORT_TASK_STATUS = [
+  {
+    label: '导出中',
+    value: enumTaskStatus.Exporting,
+  },
+  {
+    label: '已完成',
+    value: enumTaskStatus.Finished,
+  },
+  {
+    label: '导出失败',
+    value: enumTaskStatus.Failed,
+  },
+];
+export const IMPORT_TASK_STATUS = [
+  {
+    label: '导入中',
+    value: enumTaskStatus.Exporting,
+  },
+  {
+    label: '已完成',
+    value: enumTaskStatus.Finished,
+  },
+  {
+    label: '导入失败',
+    value: enumTaskStatus.Failed,
+  },
+];
diff --git a/src/components/_base/navbar/components/task-center-modal/index.vue b/src/components/_base/navbar/components/task-center-modal/index.vue
new file mode 100644
index 0000000..09815c7
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="任务中心"
+    modal-class="task-center-modal"
+    width="860px"
+    :mask-closable="false"
+    :footer="false"
+    @close="onClose"
+  >
+    <a-tabs :active-key="activeTab" @tab-click="handleTabClick">
+      <a-tab-pane key="0" title="导入"> </a-tab-pane>
+      <a-tab-pane key="1" title="导出"> </a-tab-pane>
+    </a-tabs>
+    <div class="content">
+      <component :is="activeTab === '0' ? ImportTask : ExportTask" ref="componentRef" />
+    </div>
+  </a-modal>
+</template>
+
+<script setup>
+import { Notification } from '@arco-design/web-vue';
+
+import ExportTask from './components/export-task';
+import ImportTask from './components/import-task';
+
+const visible = ref(false);
+const componentRef = ref(null);
+const activeTab = ref('0');
+
+let timer = null;
+
+const handleTabClick = (key) => {
+  activeTab.value = key;
+  nextTick(() => {
+    getData();
+  });
+};
+
+const getData = () => {
+  componentRef.value?.init();
+};
+
+const open = () => {
+  getData();
+
+  timer = setInterval(() => {
+    getData();
+  }, 10000);
+
+  visible.value = true;
+};
+const onClose = () => {
+  activeTab.value = '0';
+
+  clearTimer();
+  componentRef.value?.unloadComp?.();
+  Notification.clear();
+  visible.value = false;
+};
+const clearTimer = () => {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/components/_base/navbar/components/task-center-modal/style.scss b/src/components/_base/navbar/components/task-center-modal/style.scss
new file mode 100644
index 0000000..0485941
--- /dev/null
+++ b/src/components/_base/navbar/components/task-center-modal/style.scss
@@ -0,0 +1,77 @@
+.task-center-modal {
+  .arco-modal-header {
+    border-bottom: none !important;
+    .arco-modal-title {
+      color: var(--Text-1, #211f24);
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 24px;
+      font-family: $font-family-medium;
+    }
+  }
+  .arco-modal-body {
+    padding: 0 !important;
+    display: flex;
+    flex-direction: column;
+    height: 650px;
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+        .label {
+          margin-right: 12px;
+          color: #211f24;
+          font-family: 'PuHuiTi-Regular';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; /* 157.143% */
+        }
+        :deep(.arco-space-item) {
+          width: 100%;
+        }
+      }
+    }
+    .arco-tabs {
+      .arco-tabs-nav-top {
+        .arco-tabs-tab {
+          margin: 0 20px;
+          .arco-tabs-tab-title {
+            color: var(--Text-2, #3c4043);
+            font-family: $font-family-regular;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 22px; 
+          }
+          &.arco-tabs-tab-active {
+            .arco-tabs-tab-title {
+              color: #6D4CFE;
+              font-family: $font-family-medium;
+            }
+          }
+        }
+      }
+      .arco-tabs-content {
+        display: none;
+      }
+    }
+    .content {
+      flex: 1;
+      padding: 24px 20px;
+      overflow: hidden;
+    }
+  }
+
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}
diff --git a/src/components/_base/navbar/index.vue b/src/components/_base/navbar/index.vue
index 87412b6..fd5aeeb 100644
--- a/src/components/_base/navbar/index.vue
+++ b/src/components/_base/navbar/index.vue
@@ -1,255 +1,47 @@
-<script setup>
-import { useAppStore } from '@/stores';
-import { useEnterpriseStore } from '@/stores/modules/enterprise';
-// import { IconExport, IconFile, IconCaretDown } from '@arco-design/web-vue/es/icon';
-// import { handleUserLogout } from '@/utils/user';
-// import { fetchLogOut } from '@/api/all/login';
-import { useSidebarStore } from '@/stores/modules/side-bar';
-import { MENU_GROUP_IDS } from '@/router/constants';
-import router from '@/router';
-// import { useRoute } from 'vue-router';
-import ExitAccountModal from '@/components/_base/exit-account-modal/index.vue';
-// import { appRoutes } from '@/router/routes';
-// import { MENU_LIST } from './AgentConstants.ts';
-
-const sidebarStore = useSidebarStore();
-// const enterpriseStore = useEnterpriseStore();
-// const route = useRoute();
-const exitAccountModalRef = ref(null);
-// const selectedKey = ref([]);
-
-const selectedKey = computed(() => {
-  return [String(sidebarStore.activeMenuId)];
-});
-const menuList = computed(() => {
-  return sidebarStore.menuList;
-});
-
-const clickExit = async () => {
-  exitAccountModalRef.value?.open();
-};
-
-// const appStore = useAppStore();
-
-const setServerMenu = () => {
-  router.push('/management/person');
-};
-
-const handleDopdownClick = (item) => {
-  router.push({ name: item.routeName });
-};
-</script>
-
 <template>
-  <div class="navbar">
-    <div class="left-side">
+  <div class="navbar-wrap">
+    <div class="left-wrap">
       <a-space class="cursor-pointer" @click="router.push('/')">
         <img src="@/assets/logo.svg" alt="" />
       </a-space>
     </div>
-    <div class="center-side">
-      <div class="menu-demo h-100%">
-        <a-menu mode="horizontal" :selected-keys="selectedKey">
-          <a-menu-item v-for="item in menuList" :key="String(item.id)">
-            <template v-if="item.children">
-              <a-dropdown :popup-max-height="false" class="layout-menu-item-dropdown">
-                <a-button>
-                  <span class="menu-item-text mr-2px"> {{ item.name }}</span>
-                  <icon-caret-down size="16" class="arco-icon-down !mr-0" />
-                </a-button>
-                <template #content>
-                  <a-doption v-for="(child, ind) in item.children" :key="ind" @click="handleDopdownClick(child)">
-                    <span class="menu-item-text"> {{ child.name }}</span>
-                  </a-doption>
-                </template>
-              </a-dropdown>
-            </template>
-            <template v-else>
-              <a-menu-item :key="String(item.id)" @click="handleDopdownClick(item)">
-                <span class="menu-item-text"> {{ item.name }}</span>
-              </a-menu-item>
-            </template>
-          </a-menu-item>
-        </a-menu>
-      </div>
+    <div class="flex-1">
+      <NavbarMenu />
     </div>
-    <ul class="right-side">
-      <li>
-        <a-dropdown trigger="click" class="layout-avatar-dropdown">
-          <a-avatar class="cursor-pointer" :size="32">
-            <img alt="avatar" src="@/assets/avatar.svg" />
-          </a-avatar>
-          <template #content>
-            <div>
-              <a-doption>
-                <a-space class="flex justify-between w-100%" @click="setServerMenu">
-                  <div class="flex items-center">
-                    <img src="@/assets/option.svg" class="w-16px h-16px mr-8px" />
-                    <span>管理中心</span>
-                  </div>
-                  <icon-right size="12" />
-                </a-space>
-              </a-doption>
-              <!-- <a-doption>
-                <a-space class="flex justify-between w-100%">
-                  <div class="flex items-center">
-                    <img src="@/assets/change.svg" class="w-16px h-16px mr-8px" />
-                    <span>切换企业账号</span>
-                  </div>
-                  <icon-right size="12" />
-                </a-space>
-              </a-doption> -->
-              <a-doption>
-                <a-space class="flex justify-between w-100%" @click="clickExit">
-                  <div class="flex items-center">
-                    <img src="@/assets/exit.svg" class="w-16px h-16px mr-8px" />
-                    <span>退出登录</span>
-                  </div>
-                  <icon-right size="12" />
-                </a-space>
-              </a-doption>
-            </div>
-          </template>
-        </a-dropdown>
-      </li>
-    </ul>
-    <ExitAccountModal ref="exitAccountModalRef" />
+    <RightSide />
   </div>
 </template>
 
+<script setup>
+import NavbarMenu from './components/navbar-menu';
+import RightSide from './components/right-side';
+
+import router from '@/router';
+</script>
 <style scoped lang="scss">
-.navbar {
+.navbar-wrap {
   display: flex;
   justify-content: space-between;
   height: 100%;
   background-color: var(--color-bg-2);
   border-bottom: 1px solid var(--color-border);
-}
-.left-side {
-  display: flex;
-  align-items: center;
-  padding-left: 20px;
-}
-.center-side {
-  flex: 1;
-  display: flex;
-  align-items: center;
-
-  margin-left: 40px;
-  .menu-item-text {
-    color: var(--Text-2, #3c4043);
-    font-family: 'PuHuiTi-Medium';
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 22px;
-  }
-  :deep(.arco-menu) {
-    height: 100%;
-    .arco-menu-inner {
-      padding: 0 20px;
-    }
-    .arco-menu-item {
-      padding: 0;
-      position: relative;
-      &.arco-menu-selected {
-        .menu-item-text,
-        .arco-menu-selected-label {
-          color: #6d4cfe;
-        }
-        .arco-menu-selected-label {
-          background: var(--Brand-Brand-6, #6d4cfe);
-          height: 4px;
-          border-radius: 4px;
-          width: 50%;
-          position: absolute;
-          bottom: -8px;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-  .arco-icon-down {
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-  .arco-dropdown-open .arco-icon-down {
-    transform: rotate(180deg);
-  }
-}
-.cneter-tip {
-  font-size: 16px;
-  font-weight: 400;
-  color: var(--color-text-1);
-}
-.menu-demo {
-  flex: 1;
-}
-.right-side {
-  display: flex;
-  padding-right: 20px;
-  list-style: none;
-  li {
+  .left-wrap {
     display: flex;
     align-items: center;
-    padding: 0 10px;
+    padding-left: 20px;
   }
-  a {
-    color: var(--color-text-1);
-    text-decoration: none;
+  .arco-dropdown-option-suffix {
+    display: none;
   }
-  .nav-btn {
-    border-color: rgb(var(--gray-2));
-    color: rgb(var(--gray-8));
-    font-size: 16px;
-  }
-}
-</style>
-
-<style lang="scss">
-.layout-menu-item-dropdown,
-.layout-avatar-dropdown {
-  .arco-dropdown {
-    border-radius: 8px;
-    border: 1px solid var(--BG-300, #e6e6e8);
-    background: var(--BG-white, #fff);
-    padding: 12px 0px;
-    .arco-dropdown-option {
-      padding: 0 12px;
-      margin-bottom: 4px;
-      &-content {
-        display: flex;
-        height: 40px;
-        width: 100%;
-        padding: 10px 24px;
-        align-items: center;
-        .menu-item-text {
-          color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Regular';
-          font-size: 16px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 22px; /* 137.5% */
-        }
-      }
-      &:not(.arco-dropdown-option-disabled):hover {
-        background-color: transparent;
-        .arco-dropdown-option-content {
-          border-radius: 8px;
-          background: var(--BG-200, #f2f3f5);
-        }
-      }
-    }
-  }
-}
-.layout-avatar-dropdown {
-  width: 200px;
-  .arco-dropdown {
-    padding: 12px 4px;
-    .arco-dropdown-option {
+  .enterprises-doption {
+    .arco-dropdown-option-content {
       padding: 0 !important;
-      &-content {
-        padding: 0 12px !important;
+      border-radius: 8px;
+    }
+    &:not(.arco-dropdown-option-disabled):hover {
+      background-color: transparent;
+      .arco-dropdown-option-content {
+        background: var(--BG-200, #f2f3f5);
       }
     }
   }
diff --git a/src/components/_base/tab-bar/index.vue b/src/components/_base/tab-bar/index.vue
index 9a0a353..d430421 100644
--- a/src/components/_base/tab-bar/index.vue
+++ b/src/components/_base/tab-bar/index.vue
@@ -43,7 +43,7 @@ onUnmounted(() => {
   </div>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tab-bar-container {
   position: relative;
   background-color: var(--color-bg-2);
diff --git a/src/components/_base/tab-bar/tab-item.vue b/src/components/_base/tab-bar/tab-item.vue
index bfb11a3..4bcdd29 100644
--- a/src/components/_base/tab-bar/tab-item.vue
+++ b/src/components/_base/tab-bar/tab-item.vue
@@ -144,7 +144,7 @@ const actionSelect = async (value: any) => {
   </a-dropdown>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tag-link {
   color: var(--color-text-2);
   text-decoration: none;
diff --git a/src/views/property-marketing/media-account/components/tag-select/index.vue b/src/components/common-select/index.vue
similarity index 77%
rename from src/views/property-marketing/media-account/components/tag-select/index.vue
rename to src/components/common-select/index.vue
index 189e336..44b2025 100644
--- a/src/views/property-marketing/media-account/components/tag-select/index.vue
+++ b/src/components/common-select/index.vue
@@ -4,11 +4,12 @@
 -->
 <template>
   <a-select
-    v-model="selectedTags"
+    v-model="selectedValues"
     :multiple="multiple"
     size="medium"
     :placeholder="placeholder"
     allow-clear
+    :max-tag-count="maxTagCount"
     @change="handleChange"
   >
     <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
@@ -37,28 +38,30 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  maxTagCount: {
+    type: Number,
+    default: 3,
+  },  
 });
 
 const emits = defineEmits(['update:modelValue', 'change']);
 
-const selectedTags = ref(props.multiple ? [] : '');
+const selectedValues = ref(props.multiple ? [] : '');
 
-// 监听外部传入的值变化
 watch(
   () => props.modelValue,
   (newVal) => {
-    selectedTags.value = newVal;
+    selectedValues.value = newVal;
   },
   { immediate: true },
 );
 
-// 监听内部值变化，向外部发送更新
-watch(selectedTags, (newVal) => {
+watch(selectedValues, (newVal) => {
   emits('update:modelValue', newVal);
 });
 
 const handleChange = (value) => {
-  selectedTags.value = value;
+  selectedValues.value = value;
   emits('change', value);
 };
 </script>
diff --git a/src/components/confirm-button/index.vue b/src/components/confirm-button/index.vue
index c226209..679f8d9 100644
--- a/src/components/confirm-button/index.vue
+++ b/src/components/confirm-button/index.vue
@@ -67,4 +67,4 @@ function handleCancel() {
   emit('cancelEmit');
 }
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/components/container.vue b/src/components/container.vue
index 14d2f20..b99a435 100644
--- a/src/components/container.vue
+++ b/src/components/container.vue
@@ -15,7 +15,7 @@ const props = defineProps<{
   title: string;
 }>();
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
   background: var(--BG-white, rgba(255, 255, 255, 1));
@@ -23,7 +23,7 @@ const props = defineProps<{
   border-radius: 8px;
 }
 .title {
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 18px;
   line-height: 24px;
diff --git a/src/components/custom-table-column-modal/index.vue b/src/components/custom-table-column-modal/index.vue
index 9ffb83b..5060d64 100644
--- a/src/components/custom-table-column-modal/index.vue
+++ b/src/components/custom-table-column-modal/index.vue
@@ -65,7 +65,7 @@
 
     <template #footer>
       <div style="text-align: right">
-        <a-button class="mr-8px cancel-btn" size="medium" @click="close">取消</a-button>
+        <a-button class="mr-8px" size="medium" @click="close">取消</a-button>
         <a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
       </div>
     </template>
diff --git a/src/components/custom-table-column-modal/style.scss b/src/components/custom-table-column-modal/style.scss
index 2700810..948ca27 100644
--- a/src/components/custom-table-column-modal/style.scss
+++ b/src/components/custom-table-column-modal/style.scss
@@ -22,7 +22,7 @@
             margin-bottom: 16px;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
@@ -47,7 +47,7 @@
         flex-direction: column;
         .checked-title {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
             align-items: center;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 14px;
               font-style: normal;
               font-weight: 400;
@@ -87,13 +87,6 @@
     }
   }
   .arco-modal-footer {
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
+
   }
 }
diff --git a/src/components/customer-service-modal.vue b/src/components/customer-service-modal.vue
index 24cc2f4..9f21035 100644
--- a/src/components/customer-service-modal.vue
+++ b/src/components/customer-service-modal.vue
@@ -8,5 +8,4 @@
 <script setup lang="ts">
 import Modal from '@/components/modal.vue';
 </script>
-<style lang="less">
-</style>
+<style lang="scss"></style>
diff --git a/src/components/delete-modal.vue b/src/components/delete-modal.vue
index 0d3664d..ad26313 100644
--- a/src/components/delete-modal.vue
+++ b/src/components/delete-modal.vue
@@ -8,7 +8,7 @@
   </a-modal>
 </template>
 <script setup lang="ts"></script>
-<style lang="less">
+<style lang="scss">
 :deep(.arco-btn-status-danger) {
   background-color: red !important;
   width: 1000px !important;
@@ -19,7 +19,7 @@
   }
   .delete-modal-title {
     margin-top: 24px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
@@ -35,14 +35,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;
diff --git a/src/components/join-modal.vue b/src/components/join-modal.vue
index 1a8f320..0b32313 100644
--- a/src/components/join-modal.vue
+++ b/src/components/join-modal.vue
@@ -12,6 +12,7 @@ import { ref, onMounted } from 'vue';
 import { getQueryParam } from '@/utils/helper';
 
 import { getEnterpriseByInviteCode, joinEnterpriseByInviteCode } from '@/api/all';
+
 const enterprise = ref();
 const inviteCode = ref();
 
@@ -27,14 +28,17 @@ async function handleJoin() {
   await joinEnterpriseByInviteCode(inviteCode.value);
   AMessage.success('加入成功');
 }
-onMounted(() => {
-  getEnterprise();
+// onMounted(() => {
+//   getEnterprise();
+// });
+defineExpose({
+  getEnterprise,
 });
 </script>
-<style lang="less">
+<style lang="scss">
 .join-body {
   margin: 0;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 14px;
   color: var(--Text-1, rgba(33, 31, 36, 1));
diff --git a/src/components/modal.vue b/src/components/modal.vue
index b2ab5c5..e13c2ec 100644
--- a/src/components/modal.vue
+++ b/src/components/modal.vue
@@ -4,7 +4,7 @@
   </a-modal>
 </template>
 <script setup lang="ts"></script>
-<style lang="less">
+<style lang="scss">
 .modal {
   .arco-modal-header {
     border-bottom: none;
@@ -15,14 +15,14 @@
       border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
     :last-child {
       border-radius: 4px;
       padding: 7px 20px;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       margin-left: 16px;
diff --git a/src/components/no-data/index.vue b/src/components/no-data/index.vue
index b725aa0..3fab001 100644
--- a/src/components/no-data/index.vue
+++ b/src/components/no-data/index.vue
@@ -39,7 +39,7 @@ const props = defineProps({
   line-height: 1.5em;
   .text {
     color: var(--Text-3, #737478);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/components/svg-icon/index.vue b/src/components/svg-icon/index.vue
new file mode 100644
index 0000000..18e5669
--- /dev/null
+++ b/src/components/svg-icon/index.vue
@@ -0,0 +1,29 @@
+<template>
+  <svg aria-hidden="true" class="svg-icon" :width="props.size" :height="props.size">
+    <use :xlink:href="symbolId" :fill="props.color" />
+  </svg>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  prefix: {
+    type: String,
+    default: 'icon',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  color: {
+    type: String,
+    default: '#333',
+  },
+  size: {
+    type: String,
+    default: '12',
+  },
+});
+
+const symbolId = computed(() => `#${props.prefix}-${props.name}`);
+</script>
diff --git a/src/components/wyg-form/index.vue b/src/components/wyg-form/index.vue
index 319c8d6..36b4cd4 100644
--- a/src/components/wyg-form/index.vue
+++ b/src/components/wyg-form/index.vue
@@ -249,7 +249,7 @@ defineExpose({
   updateFieldsList,
 });
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 :deep(.arco-picker) {
   width: 100%;
 }
diff --git a/src/components/wyg-table/index.vue b/src/components/wyg-table/index.vue
index ec569c5..22d60aa 100644
--- a/src/components/wyg-table/index.vue
+++ b/src/components/wyg-table/index.vue
@@ -70,4 +70,4 @@ watchEffect(() => {
   }
 });
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/hooks/useTableSelectionWithPagination.ts b/src/hooks/useTableSelectionWithPagination.ts
new file mode 100644
index 0000000..80ae4aa
--- /dev/null
+++ b/src/hooks/useTableSelectionWithPagination.ts
@@ -0,0 +1,96 @@
+import { ref, computed } from 'vue';
+
+interface UseTableSelectionWithPaginationOptions {
+  rowKey?: string; // 主键字段名，默认 'id'
+  pageInfo?: {
+    page?: number;
+    page_size?: number;
+    total?: number;
+  };
+  onPageChange?: (page: number) => void;
+  onPageSizeChange?: (size: number) => void;
+  onSelectChange?: () => void;
+}
+
+const DEFAULT_PAGE_INFO = {
+  page: 1,
+  page_size: 20,
+  total: 0,
+};
+
+export function useTableSelectionWithPagination(options: UseTableSelectionWithPaginationOptions = {}) {
+  const rowKey = options.rowKey || 'id';
+
+  const selectedRowKeys = ref<Array<string | number>>([]);
+  const selectedRows = ref<any[]>([]);
+
+  const pageInfo = ref(merge({}, DEFAULT_PAGE_INFO, options.pageInfo));
+
+  const dataSource = ref<any[]>([]);
+
+  // 单行选择
+  const handleSelect = (selectedKeys: (string | number)[], rowKeyValue: string | number, record: any) => {
+    const select = selectedKeys.includes(rowKeyValue);
+    selectedRowKeys.value = selectedKeys;
+
+    if (select) {
+      if (!selectedRows.value.some((v) => v[rowKey] === record[rowKey])) {
+        selectedRows.value.push(record);
+      }
+    } else {
+      selectedRows.value = selectedRows.value.filter((v) => v[rowKey] !== record[rowKey]);
+    }
+    options.onSelectChange?.();
+  };
+
+  // 全选/取消全选
+  const handleSelectAll = (checked: boolean) => {
+    const currentPageRows = dataSource.value;
+    const currentPageKeys = currentPageRows.map((v) => v[rowKey]);
+
+    if (checked) {
+      selectedRowKeys.value = Array.from(new Set([...selectedRowKeys.value, ...currentPageKeys]));
+      const allRows = [...selectedRows.value, ...currentPageRows];
+      const map = new Map();
+      allRows.forEach((row) => map.set(row[rowKey], row));
+      selectedRows.value = Array.from(map.values());
+    } else {
+      selectedRowKeys.value = selectedRowKeys.value.filter((key) => !currentPageKeys.includes(key));
+      selectedRows.value = selectedRows.value.filter((row) => !currentPageKeys.includes(row[rowKey]));
+    }
+    options.onSelectChange?.();
+  };
+
+  const onPageChange = (page: number) => {
+    pageInfo.value.page = page;
+    options.onPageChange?.(page);
+  };
+  const onPageSizeChange = (size: number) => {
+    pageInfo.value.page_size = size;
+    pageInfo.value.page = 1;
+    options.onPageSizeChange?.(size);
+  };
+  const resetPageInfo = () => {
+    pageInfo.value = cloneDeep(DEFAULT_PAGE_INFO)
+  }
+
+  const rowSelection = computed(() => ({
+    type: 'checkbox',
+    showCheckedAll: true,
+    width: 48,
+  }));
+
+  return {
+    selectedRowKeys,
+    selectedRows,
+    dataSource,
+    pageInfo,
+    onPageChange,
+    onPageSizeChange,
+    rowSelection,
+    handleSelect,
+    handleSelectAll,
+    resetPageInfo,
+    DEFAULT_PAGE_INFO,
+  };
+}
diff --git a/src/layouts/Basic.vue b/src/layouts/Basic.vue
index f3879ae..8f3f10d 100644
--- a/src/layouts/Basic.vue
+++ b/src/layouts/Basic.vue
@@ -1,13 +1,17 @@
-<script setup lang="ts">
+<script setup>
 import { useAppStore } from '@/stores';
 import { useResponsive } from '@/hooks';
 import JoinModal from '@/components/join-modal.vue';
 import { getQueryParam } from '@/utils/helper';
+import { useUserStore } from '@/stores';
+
 import { ref, onMounted, computed } from 'vue';
 import { useRoute } from 'vue-router';
 
 const joinEnterpriseVisible = ref(false);
+const joinModalRef = ref(null);
 const appStore = useAppStore();
+const userStore = useUserStore();
 const router = useRouter();
 const route = useRoute();
 
@@ -36,14 +40,15 @@ const paddingStyle = computed(() => {
 onMounted(() => {
   checkHasInviteCode();
 });
-const setCollapsed = (val: boolean) => {
+const setCollapsed = (val) => {
   appStore.updateSettings({ menuCollapse: val });
 };
 
 const checkHasInviteCode = () => {
   const inviteCode = getQueryParam('invite_code');
-  if (inviteCode) {
+  if (userStore.isLogin && inviteCode) {
     joinEnterpriseVisible.value = true;
+    joinModalRef.value?.getEnterprise?.();
   }
 };
 const drawerVisible = ref(false);
@@ -57,7 +62,7 @@ provide('toggleDrawerMenu', () => {
 
 <template>
   <a-layout :class="['layout', { mobile: appStore.hideMenu }]">
-    <JoinModal v-model:visible="joinEnterpriseVisible" />
+    <JoinModal v-model:visible="joinEnterpriseVisible" ref="joinModalRef" />
     <div v-if="navbar" class="layout-navbar">
       <base-navbar />
     </div>
@@ -102,9 +107,9 @@ provide('toggleDrawerMenu', () => {
   </a-layout>
 </template>
 
-<style scoped lang="less">
-@nav-size-height: 72px;
-@layout-max-width: 1100px;
+<style scoped lang="scss">
+$nav-size-height: 72px;
+$layout-max-width: 1100px;
 
 .layout {
   width: 100%;
@@ -116,7 +121,7 @@ provide('toggleDrawerMenu', () => {
   left: 0;
   z-index: 100;
   width: 100%;
-  height: @nav-size-height;
+  height: $nav-size-height;
 }
 .layout-sider {
   position: fixed;
diff --git a/src/layouts/NotFound.vue b/src/layouts/NotFound.vue
index cfc297a..33e7585 100644
--- a/src/layouts/NotFound.vue
+++ b/src/layouts/NotFound.vue
@@ -14,7 +14,7 @@ const back = () => {
   </div>
 </template>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .content {
   position: absolute;
   top: 50%;
diff --git a/src/layouts/Page.vue b/src/layouts/Page.vue
index d9fbcb5..c17a8a5 100644
--- a/src/layouts/Page.vue
+++ b/src/layouts/Page.vue
@@ -27,7 +27,7 @@ const hideFooter = computed(() => route.meta?.hideFooter);
   </router-view>
 </template>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .footer {
   margin: 20px;
   width: 98%;
diff --git a/src/main.ts b/src/main.ts
index e6d2445..bab185a 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,22 +5,25 @@
 import App from './App.vue';
 import router from './router';
 import store from './stores';
-import NoData from '@/components/no-data';
-import '@/api/index';
 
+import NoData from '@/components/no-data';
+import SvgIcon from "@/components/svg-icon";
+
+import '@/api/index';
 import '@arco-design/web-vue/dist/arco.css'; // Arco 默认样式
-import './styles';
 import './core';
+
+import 'normalize.css';
 import 'uno.css';
-import './mock';
+import 'virtual:svg-icons-register'
+
 // import '@/styles/vars.css'; // 优先加载
 
 const app = createApp(App);
+
+app.component('NoData', NoData);
+app.component('SvgIcon', SvgIcon);
+
 app.use(store);
 app.use(router);
-app.component('NoData', NoData);
-
-router.isReady().then(async () => {
-
-  app.mount('#app');
-});
+app.mount('#app');
diff --git a/src/permission/permission.ts b/src/permission/permission.ts
index 13418fd..27ddd3d 100644
--- a/src/permission/permission.ts
+++ b/src/permission/permission.ts
@@ -5,7 +5,5 @@ export function checkRoutePermission(routeName: string) {
   const allowAccessRoutes = userStore.allowAccessRoutes;
 
   if (!routeName) return false;
-  // todo
-  return true;
-  // return allowAccessRoutes.includes(routeName);
+  return allowAccessRoutes.includes(routeName);
 }
diff --git a/src/router/guard/userLoginInfo.ts b/src/router/guard/userLoginInfo.ts
index 30e1169..cc3f891 100644
--- a/src/router/guard/userLoginInfo.ts
+++ b/src/router/guard/userLoginInfo.ts
@@ -18,9 +18,10 @@ export default function setupUserLoginInfoGuard(router: Router) {
     const routeName = to?.name as string;
     const requiresAuth = to?.meta?.requiresAuth || false;
     const requireLogin = to?.meta?.requireLogin || false;
+    const query = to?.query ?? {};
 
     if (requireLogin && !userStore.isLogin) {
-      goUserLogin();
+      goUserLogin(query);
       next();
       return;
     }
diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts
index 58e5ed4..f47428b 100644
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@@ -5,10 +5,11 @@
 import type { AppRouteRecordRaw } from '../types';
 import { MENU_GROUP_IDS } from '@/router/constants';
 
-import IconRepository from '@/assets/svg/icon-repository.svg';
-import IconMediaAccount from '@/assets/svg/icon-mediaAccount.svg';
-import IconPutAccount from '@/assets/svg/icon-putAccount.svg';
-import IconIntelligentSolution from '@/assets/svg/icon-intelligentSolution.svg';
+import IconRepository from '@/assets/svg/svg-repository.svg';
+import IconMediaAccount from '@/assets/svg/svg-mediaAccount.svg';
+import IconPutAccount from '@/assets/svg/svg-putAccount.svg';
+import IconIntelligentSolution from '@/assets/svg/svg-intelligentSolution.svg';
+import IconProjectManagement from '@/assets/svg/svg-projectManagement.svg';
 
 const COMPONENTS: AppRouteRecordRaw[] = [
   {
@@ -158,13 +159,50 @@ const COMPONENTS: AppRouteRecordRaw[] = [
       },
     ],
   },
+  // {
+  //   path: '/intelligent-solution',
+  //   name: 'IntelligentSolution',
+  //   redirect: 'intelligent-solution/businessAnalysisReport',
+  //   meta: {
+  //     locale: '智能方案管理',
+  //     icon: IconIntelligentSolution,
+  //     requiresAuth: true,
+  //     requireLogin: true,
+  //     roles: ['*'],
+  //     id: MENU_GROUP_IDS.PROPERTY_ID,
+  //   },
+  //   children: [
+  //     {
+  //       path: 'businessAnalysisReport',
+  //       name: 'IntelligentSolutionBusinessAnalysisReport',
+  //       meta: {
+  //         locale: '业务洞察报告',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
+  //     },
+  //     {
+  //       path: 'competitiveProductAnalysisReport',
+  //       name: 'IntelligentSolutionCompetitiveProductAnalysisReport',
+  //       meta: {
+  //         locale: '竟品对比报告',
+  //         requiresAuth: true,
+  //         requireLogin: true,
+  //         roles: ['*'],
+  //       },
+  //       component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport'),
+  //     },
+  //   ],
+  // },
   {
-    path: '/intelligent-solution',
-    name: 'IntelligentSolution',
-    redirect: 'intelligent-solution/businessAnalysisReport',
+    path: '/project-manage',
+    name: 'ProjectManagement',
+    redirect: 'project-manage/project-list',
     meta: {
-      locale: '智能方案管理',
-      icon: IconIntelligentSolution,
+      locale: '项目管理',
+      icon: IconProjectManagement,
       requiresAuth: true,
       requireLogin: true,
       roles: ['*'],
@@ -172,26 +210,15 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'businessAnalysisReport',
-        name: 'IntelligentSolutionBusinessAnalysisReport',
+        path: 'project-list',
+        name: 'ProjectList',
         meta: {
-          locale: '业务洞察报告',
+          locale: '项目列表',
           requiresAuth: true,
           requireLogin: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/intelligent-solution/businessAnalysisReport'),
-      },
-      {
-        path: 'competitiveProductAnalysisReport',
-        name: 'IntelligentSolutionCompetitiveProductAnalysisReport',
-        meta: {
-          locale: '竟品对比报告',
-          requiresAuth: true,
-          requireLogin: true,
-          roles: ['*'],
-        },
-        component: () => import('@/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport'),
+        component: () => import('@/views/property-marketing/project-manage/project-list'),
       },
     ],
   },
diff --git a/src/stores/modules/side-bar/constants.ts b/src/stores/modules/side-bar/constants.ts
index 30c732f..8bd5ed5 100644
--- a/src/stores/modules/side-bar/constants.ts
+++ b/src/stores/modules/side-bar/constants.ts
@@ -77,12 +77,19 @@ export const MENU_LIST = [
           'guideDetail',
         ],
       },
+      // {
+      //   name: '智能方案管理',
+      //   routeName: 'IntelligentSolutionBusinessAnalysisReport',
+      //   includeRouteNames: [
+      //     'IntelligentSolutionBusinessAnalysisReport',
+      //     'IntelligentSolutionCompetitiveProductAnalysisReport',
+      //   ],
+      // },
       {
-        name: '智能方案管理',
-        routeName: 'IntelligentSolutionBusinessAnalysisReport',
+        name: '项目管理',
+        routeName: 'ProjectList',
         includeRouteNames: [
-          'IntelligentSolutionBusinessAnalysisReport',
-          'IntelligentSolutionCompetitiveProductAnalysisReport',
+          'ProjectList',
         ],
       },
     ],
diff --git a/src/stores/modules/side-bar/index.ts b/src/stores/modules/side-bar/index.ts
index cca787f..f12c136 100644
--- a/src/stores/modules/side-bar/index.ts
+++ b/src/stores/modules/side-bar/index.ts
@@ -7,18 +7,22 @@ import router from '@/router';
 import type { RouteLocationNormalized } from 'vue-router';
 import { MENU_LIST } from './constants';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
+import { getTaskUnread, patchTaskRead } from '@/api/all/common';
 
 interface sidebarState {
   activeMenuId: number | null;
   menuList: any[];
   allowAccessRoutes: any[];
+  unreadInfo: number[];
 }
 
+let unreadInfoTimer: number | null = null;
+
 export const useSidebarStore = defineStore('sidebar', {
   state: (): sidebarState => ({
-    activeMenuId: null,
-    menuList: [],
-
+    activeMenuId: null, // 
+    menuList: [], // 菜单信息 
+    unreadInfo: [], // 未读消息
     allowAccessRoutes: [], // 允许访问的路由列表
   }),
   actions: {
@@ -42,17 +46,13 @@ export const useSidebarStore = defineStore('sidebar', {
     setActiveMenuIdByRoute(route: RouteLocationNormalized) {
       const appRoutes = router.options?.routes ?? [];
 
-      // 查找当前路由所属的菜单组
       const findMenuGroup = (routes: any[]): number | null => {
         for (const routeItem of routes) {
-          // 检查子路由
           if (routeItem.children?.length > 0) {
-            // 检查当前路由是否是这个父路由的子路由
             const isChildRoute = routeItem.children.some((child: any) => child.name === route.name);
             if (isChildRoute) {
               return routeItem.meta?.id || null;
             }
-            // 递归检查更深层的子路由
             const childResult = findMenuGroup(routeItem.children);
             if (childResult !== null) {
               return routeItem.meta?.id || childResult;
@@ -71,5 +71,31 @@ export const useSidebarStore = defineStore('sidebar', {
         this.activeMenuId = menuId;
       }
     },
+    async getTaskUnreadInfo() {
+      const { code, data } = await getTaskUnread();
+      if (code === 200) {
+        this.unreadInfo = data;
+      }
+    },
+
+    // 查询未读信息
+    startUnreadInfoPolling() {
+      if (unreadInfoTimer) return;
+      this.getTaskUnreadInfo();
+      unreadInfoTimer = window.setInterval(() => {
+        this.getTaskUnreadInfo();
+      }, 30000);
+    },
+    stopUnreadInfoPolling() {
+      this.unreadInfo = [];
+      if (unreadInfoTimer) {
+        clearInterval(unreadInfoTimer);
+        unreadInfoTimer = null;
+      }
+    },
+    async removeTaskUnreadInfo() {
+      patchTaskRead({ ids: this.unreadInfo });
+      this.unreadInfo = [];
+    },
   },
 });
diff --git a/src/stores/modules/user/index.ts b/src/stores/modules/user/index.ts
index 5a26ab0..71443de 100644
--- a/src/stores/modules/user/index.ts
+++ b/src/stores/modules/user/index.ts
@@ -47,7 +47,7 @@ export const useUserStore = defineStore('user', {
       slsWithCatch('accessToken', this.token);
     },
 
-    deleteToken() {
+    clearToken() {
       this.token = '';
       rlsWithCatch('accessToken');
     },
diff --git a/src/styles/components/button.scss b/src/styles/components/button.scss
new file mode 100644
index 0000000..b5fb0c3
--- /dev/null
+++ b/src/styles/components/button.scss
@@ -0,0 +1,183 @@
+.arco-btn {
+  border-radius: 2px;
+  border: 1px solid #d7d7d9 !important;
+  color: #3c4043 !important;
+  font-family: $font-family-regular;
+  font-size: 14px !important;
+  font-style: normal;
+  font-weight: 400 !important;
+  line-height: 22px !important;
+  &.arco-btn-disabled {
+    border-color: #f2f3f5 !important;
+    color: #b1b2b5 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      border-color: #e6e6e8 !important;
+      color: #737478 !important;
+    }
+  }
+}
+
+.arco-btn-primary {
+  background-color: $color-primary !important;
+  border: none !important;
+  color: #fff !important;
+  &.arco-btn-disabled {
+    color: #fff !important;
+    background-color: $color-primary-3 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      color: #fff !important;
+      background-color: $color-primary-5 !important;
+    }
+  }
+
+  //success
+  &.arco-btn-status-success {
+    background-color: $color-success !important;
+    &.arco-btn-disabled {
+      background-color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-success-5 !important;
+      }
+    }
+  }
+
+  // danger
+  &.arco-btn-status-danger {
+    background-color: $color-error !important;
+    &.arco-btn-disabled {
+      background-color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-error-5 !important;
+      }
+    }
+  }
+
+  // warning
+  &.arco-btn-status-warning {
+    background-color: $color-warning !important;
+    &.arco-btn-disabled {
+      background-color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        background-color: $color-warning-5 !important;
+      }
+    }
+  }
+}
+
+.arco-btn-outline {
+  border: 1px solid $color-primary !important;
+  color: $color-primary !important;
+  &.arco-btn-disabled {
+    border-color: $color-primary-3 !important;
+    color: $color-primary-3 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      border-color: $color-primary-5 !important;
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    border: 1px solid $color-success !important;
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      border-color: $color-success-3 !important;
+      color: $color-success-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-success-5 !important;
+        color: $color-success-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-danger {
+    border: 1px solid $color-error !important;
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      border-color: $color-error-3 !important;
+      color: $color-error-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-error-5 !important;
+        color: $color-error-5 !important;
+      }
+    }
+  }
+  &.arco-btn-status-warning {
+    border: 1px solid $color-warning !important;
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      border-color: $color-warning-3 !important;
+      color: $color-warning-3 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        border-color: $color-warning-5 !important;
+        color: $color-warning-5 !important;
+      }
+    }
+  }
+}
+
+.arco-btn-text {
+  background-color: transparent !important;
+  border: none !important;
+  color: $color-primary !important;
+  &.arco-btn-disabled {
+    color: $color-primary-2 !important;
+  }
+  &:not(.arco-btn-disabled) {
+    &:hover {
+      color: $color-primary-5 !important;
+    }
+  }
+
+  &.arco-btn-status-success {
+    color: $color-success !important;
+    &.arco-btn-disabled {
+      color: $color-success-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-success-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-danger {
+    color: $color-error !important;
+    &.arco-btn-disabled {
+      color: $color-error-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-error-5 !important;
+      }
+    }
+  }
+
+  &.arco-btn-status-warning {
+    color: $color-warning !important;
+    &.arco-btn-disabled {
+      color: $color-warning-2 !important;
+    }
+    &:not(.arco-btn-disabled) {
+      &:hover {
+        color: $color-warning-5 !important;
+      }
+    }
+  }
+}
diff --git a/src/styles/components/checkbox.scss b/src/styles/components/checkbox.scss
index 2bc38b0..b988e77 100644
--- a/src/styles/components/checkbox.scss
+++ b/src/styles/components/checkbox.scss
@@ -11,13 +11,13 @@
     }
     &.arco-checkbox-checked {
       .arco-checkbox-icon {
-        background-color: #A794FE !important;
+        background-color: #a794fe !important;
       }
     }
     &.arco-checkbox-indeterminate {
       .arco-checkbox-icon {
         border: none;
-        background-color: #A794FE !important;
+        background-color: #a794fe !important;
       }
     }
   }
@@ -25,7 +25,7 @@
   &.arco-checkbox-indeterminate {
     .arco-checkbox-icon  {
      background-color: #6D4CFE !important; 
+     border: none;
     }
   }
-
 }
diff --git a/src/styles/components/date-picker.scss b/src/styles/components/date-picker.scss
new file mode 100644
index 0000000..568a2ce
--- /dev/null
+++ b/src/styles/components/date-picker.scss
@@ -0,0 +1,18 @@
+.arco-picker {
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    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;
+  }
+}
diff --git a/src/styles/components/form.scss b/src/styles/components/form.scss
new file mode 100644
index 0000000..8a5895c
--- /dev/null
+++ b/src/styles/components/form.scss
@@ -0,0 +1,22 @@
+.arco-form {
+  .arco-form-item {
+    margin-bottom: 16px !important;
+    .arco-form-item-label-col {
+      padding-right: 12px !important;
+      .arco-form-item-label {
+        color: #211f24;
+        font-family: $font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+        .arco-form-item-label-required-symbol {
+          color: #f64b31;
+          margin-right: 4px;
+          font-size: 14px;
+          font-family: $font-family-regular;
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index 39ccb7a..33c8e54 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -3,4 +3,10 @@
 @import './checkbox.scss';
 @import './pagination.scss';
 @import './tabs.scss';
-@import './modal.scss';
\ No newline at end of file
+@import './modal.scss';
+@import "./textarea.scss";
+@import "./select.scss";
+@import "./date-picker.scss";
+@import "./button.scss";
+@import "./steps.scss";
+@import "./form.scss";
\ No newline at end of file
diff --git a/src/styles/components/input.scss b/src/styles/components/input.scss
index a352fa3..e55b6f4 100644
--- a/src/styles/components/input.scss
+++ b/src/styles/components/input.scss
@@ -1,5 +1,18 @@
 .arco-input-wrapper {
-  border-radius: 4px;
-  border-color: #d7d7d9;
-  background-color: #fff;
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    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;
+  }
 }
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
index aee1303..c088215 100644
--- a/src/styles/components/modal.scss
+++ b/src/styles/components/modal.scss
@@ -4,6 +4,11 @@
     height: 56px;
     padding: 0 20px;
     .arco-modal-title {
+      font-family: $font-family-medium;
+      color: #211f24;
+      font-size: 16px;
+      font-style: normal;
+      font-weight: 400;
       justify-content: flex-start;
     }
   }
diff --git a/src/styles/components/pagination.scss b/src/styles/components/pagination.scss
index e739b4e..6015af3 100644
--- a/src/styles/components/pagination.scss
+++ b/src/styles/components/pagination.scss
@@ -28,7 +28,7 @@
     &-prepend {
       color: var(--Text-2, #3c4043);
       text-align: right;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/styles/components/select.scss b/src/styles/components/select.scss
new file mode 100644
index 0000000..81f20c1
--- /dev/null
+++ b/src/styles/components/select.scss
@@ -0,0 +1,18 @@
+.arco-select {
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    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;
+  }
+}
diff --git a/src/styles/components/steps.scss b/src/styles/components/steps.scss
new file mode 100644
index 0000000..e112909
--- /dev/null
+++ b/src/styles/components/steps.scss
@@ -0,0 +1,47 @@
+.arco-steps {
+  .arco-steps-item {
+    .arco-steps-item-node {
+      .arco-steps-icon {
+        width: 28px;
+        height: 28px;
+        border-radius: 32px;
+        color: #3c4043;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 24px;
+        font-family: $font-family-manrope-medium;
+        background-color: #f2f3f5;
+      }
+    }
+    .arco-steps-item-content {
+      .arco-steps-item-title {
+        color: #3c4043;
+        font-family: $font-family-regular;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        &::after {
+          background-color: #e6e6e8 !important;
+        }
+      }
+    }
+    &-active,
+    &-finish {
+      .arco-steps-item-node {
+        .arco-steps-icon {
+          color: #fff;
+          background-color: #6d4cfe;
+        }
+      }
+      .arco-steps-item-content {
+        .arco-steps-item-title {
+          font-family: $font-family-medium;
+          &::after {
+            background-color: #6d4cfe !important;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
index 8f422b4..4abb4b9 100644
--- a/src/styles/components/table.scss
+++ b/src/styles/components/table.scss
@@ -1,7 +1,7 @@
 .arco-table {
   @mixin table-cell-text {
     color: var(--Text-1, #3C4043);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/styles/components/tabs.scss b/src/styles/components/tabs.scss
index 4148086..1e15683 100644
--- a/src/styles/components/tabs.scss
+++ b/src/styles/components/tabs.scss
@@ -4,7 +4,7 @@
       .arco-tabs-tab {
         .arco-tabs-tab-title {
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/styles/components/textarea.scss b/src/styles/components/textarea.scss
new file mode 100644
index 0000000..7b8408a
--- /dev/null
+++ b/src/styles/components/textarea.scss
@@ -0,0 +1,18 @@
+.arco-textarea-wrapper {
+  border-radius: 4px !important;
+  border-color: #d7d7d9 !important;
+  background-color: #fff !important;
+  &:hover {
+    background-color: #fff !important;
+  }
+  &:focus-within,
+  &.arco-input-focus,
+  &.arco-textarea-focus {
+    background-color: var(--color-bg-2) !important;
+    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;
+  }
+}
diff --git a/src/styles/font.scss b/src/styles/font.scss
index ea0f7c1..e6195d3 100644
--- a/src/styles/font.scss
+++ b/src/styles/font.scss
@@ -1,30 +1,18 @@
 @font-face {
-  font-family: 'PuHuiTi-Regular';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Regular.woff2') format('woff2');
-  font-display: swap;
+  font-family: 'Manrope-Regular';
+  src: url('@/assets/fonts/Manrope-Regular.ttf');
+}
+@font-face {
+  font-family: 'Manrope-Medium';
+  src: url('@/assets/fonts/Manrope-Medium.ttf');
 }
 
 @font-face {
-  font-family: 'PuHuiTi-Medium';
-  src: url('@/assets/fonts/Alibaba-PuHuiTi-Medium.woff2') format('woff2');
-  font-display: swap;
+  font-family: 'Manrope-Bold';
+  src: url('@/assets/fonts/Manrope-Bold.ttf');
 }
 
 @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-medium {
-  font-family: 'PuHuiTi-Medium' !important;
-}
-
-.font-family-puhui-bold {
-  font-family: 'PuHuiTi-Bold' !important;
+  font-family: 'Manrope-SemiBold';
+  src: url('@/assets/fonts/Manrope-SemiBold.ttf');
 }
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..689de18
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,10 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-30 16:03:42
+ */
+@import './font.scss';
+@import './lib/variable.scss';
+@import './lib/reset.scss';
+
+@import './vars.scss';
+@import './components/index.scss';
diff --git a/src/styles/index.ts b/src/styles/index.ts
deleted file mode 100644
index 0541f16..0000000
--- a/src/styles/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-06-30 16:03:42
- */
-import './vars.css';
-import './components/index.scss';
-import './font.scss';
-import 'normalize.css';
-import 'uno.css';
diff --git a/src/styles/lib/reset.scss b/src/styles/lib/reset.scss
new file mode 100644
index 0000000..5c3b861
--- /dev/null
+++ b/src/styles/lib/reset.scss
@@ -0,0 +1,25 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: PingFangSC-Regular, PingFang SC;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+html,
+body {
+  background: $color-background;
+  font-family: $font-family-regular;
+  font-size: 14px;
+  -webkit-print-color-adjust: exact;
+}
+
+p {
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+}
diff --git a/src/styles/lib/variable.scss b/src/styles/lib/variable.scss
new file mode 100644
index 0000000..fe28ae1
--- /dev/null
+++ b/src/styles/lib/variable.scss
@@ -0,0 +1,56 @@
+
+// 汉字字体
+$font-family-regular: 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-medium: 'PingFangSC-Medium', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-light: 'PingFangSC-Light', 'Microsoft Yahei', Arial, sans-serif;
+$font-family-bold: 'PingFangSC-Semibold', 'PingFangSC-Regular', 'Microsoft Yahei', Arial, sans-serif;
+
+// 数字字体包
+$font-family-manrope-regular: 'Manrope-Regular';
+$font-family-manrope-medium: 'Manrope-Medium';
+$font-family-manrope-bold: 'Manrope-Bold';
+$font-family-manrope-semiBold: 'Manrope-SemiBold';
+
+$color-background: #f9f9f9;
+
+$color-primary: #6d4cfe;   // 常规
+$color-primary-5: #8A70FE; // hover
+$color-primary-7: #573DCB; // click
+$color-primary-3: #A794FE; // disabled
+$color-primary-2: #C5B7FF; // text disabled
+$color-primary-1: #F0EDFF; // 浅色
+
+$color-success: #25C883;      
+$color-success-5: #57CF9C;
+$color-success-7: #1BAE71;
+$color-success-3: #81DBB5;
+$color-success-2: #ABE7CE;
+$color-success-1: #EBF7F2;  
+
+$color-warning: #FFAE00;
+$color-warning-5: #FFBE33;
+$color-warning-7: #CC8B00;
+$color-warning-3: #FFCF66;
+$color-warning-2: #FFDF99;  
+$color-warning-1: #FFF7E5;  
+
+$color-error: #F64B31;
+$color-error-5: #F86F5A;
+$color-error-7: #C53C27;
+$color-error-3: #FA9383;
+$color-error-2: #FBB7AD;
+$color-error-1: #FFE9E7;
+
+$color-blue: #2A59F3;
+$color-blue-5: #557AF6;
+$color-blue-7: #2247C2;
+$color-blue-3: #7F9CF8;
+$color-blue-2: #AABDFA;
+$color-blue-1: #E5ECFF;
+
+$color-teal: #39C6E9;
+$color-teal-5: #60D2ED;
+$color-teal-7: #2E9EBA;
+$color-teal-3: #88DDF2;
+$color-teal-2: #B0E8F6;
+$color-teal-1: #E1F9FF;
\ No newline at end of file
diff --git a/src/styles/mixins/ellipsis.scss b/src/styles/mixins/ellipsis.scss
new file mode 100644
index 0000000..40ba5d2
--- /dev/null
+++ b/src/styles/mixins/ellipsis.scss
@@ -0,0 +1,14 @@
+@mixin multi-ellipsis($lines) {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: $lines;
+  /* autoprefixer: ignore next */
+  -webkit-box-orient: vertical;
+}
+
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/src/styles/mixins/index.scss b/src/styles/mixins/index.scss
new file mode 100644
index 0000000..3a3b3e8
--- /dev/null
+++ b/src/styles/mixins/index.scss
@@ -0,0 +1 @@
+@import "./ellipsis.scss"
\ No newline at end of file
diff --git a/src/styles/vars.css b/src/styles/vars.scss
similarity index 80%
rename from src/styles/vars.css
rename to src/styles/vars.scss
index 7a00c4c..573e1ee 100644
--- a/src/styles/vars.css
+++ b/src/styles/vars.scss
@@ -1,8 +1,9 @@
 :root {
-  /* 修改主色 */
-  --arco-primary-6: #dd3e05 !important; /* 默认主色 */
-  --arco-primary-5: #40ffdf !important; /* 悬停色 */
-  --arco-primary-7: #c9dbed !important; /* 点击色 */
+  /* 主色覆盖（强制替换 Arco 默认蓝色） */
+  --arco-primary-6: #6d4cfe !important;
+  --arco-primary-5: #8a70fe !important;
+  --arco-primary-7: #573dcb !important;
+  --arco-primary-1: #f5f2ff !important; /* 浅色背景 */
 
   /* 修改成功/警告/错误色 */
   --arco-success-6: #52c41a !important;
@@ -14,40 +15,6 @@
   --arco-bg-1: #f7f8fa !important; /* 页面背景 */
 }
 
-* {
-  box-sizing: border-box;
-}
-p {
-  margin: 0;
-  padding: 0;
-}
-
-.flex {
-  display: flex;
-}
-
-.item-center {
-  align-items: center;
-}
-
-.box-container {
-  border-radius: 2px;
-  padding: 20px;
-  margin: 8px;
-  background-color: #fff;
-}
-
-:root {
-  /* 主色覆盖（强制替换 Arco 默认蓝色） */
-  --arco-primary-6: #6d4cfe !important;
-  --arco-primary-5: #8a70fe !important;
-  --arco-primary-7: #573dcb !important;
-  --arco-primary-1: #f5f2ff !important; /* 浅色背景 */
-}
-
-.arco-checkbox-checked .arco-checkbox-icon {
-  background-color: #573dcb !important;
-}
 /* 强制所有组件使用主色 */
 .arco-btn-primary,
 .arco-menu-selected,
diff --git a/src/utils/arcoD.tsx b/src/utils/arcoD.tsx
new file mode 100644
index 0000000..44b9d7d
--- /dev/null
+++ b/src/utils/arcoD.tsx
@@ -0,0 +1,94 @@
+import { Notification } from '@arco-design/web-vue';
+import { downloadByUrl } from '@/utils/tools';
+import { IconLoading } from '@arco-design/web-vue/es/icon';
+
+
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+import icon2 from '@/assets/img/media-account/icon-success.png';
+import icon3 from "@/assets/img/media-account/icon-warn.png"
+
+interface RenderNotificationData {
+  total_number: number;
+  success_number: number;
+  fail_number: number;
+  file?: string;
+}
+
+// 下载通知框
+export function showExportNotification(label: string, others: { id?: string, duration?: number }) {
+  const { id = '', duration = 3000 } = others ?? {}
+  Notification.warning({
+    id,
+    showIcon: false,
+    closable: true,
+    content: () => (
+      <div class="flex items-center pr-16px">
+        <IconLoading size={16} class="color-#6D4CFE mr-8px" />
+        <p class="text-14px lh-22px font-400 color-#211F24">{label}</p>
+      </div>
+    ),
+    duration,
+    class: 'px-16px py-9px w-450px rounded-2px bg-#F0EDFF',
+  });
+}
+
+// 下载失败框
+export function showFailExportNotification(label: string, others: { id?: string, duration?: number, onReDownload?: Function }) {
+  const { id = '', duration = 0, onReDownload } = others ?? {}
+  Notification.warning({
+    id,
+    showIcon: false,
+    closable: true,
+    content: () => (
+      <div class="flex items-center justify-between pr-16px">
+        <div class="flex items-center mr-10px">
+          <img src={icon3} width={16} height={16} class=" mr-8px" />
+          <p class="text-14px lh-22px font-400 color-#211F24 ">{label}</p>
+        </div>
+
+        <p class="text-14px lh-22px font-400 color-#6D4CFE cursor-pointer" onClick={() => onReDownload?.()}>重新下载</p>
+      </div>
+    ),
+    duration,
+    class: 'px-16px py-9px w-500px rounded-2px bg-#FFE9E7',
+  });
+}
+
+export const showImportResultNotification = (data: RenderNotificationData) => {
+  const { total_number, success_number, fail_number, file } = data;
+  const hasError = fail_number > 0;
+  const handleDownloadError = (file?: string) => {
+    file && downloadByUrl(file);
+  };
+
+  Notification.warning({
+    showIcon: false,
+    closable: true,
+    content: () => (
+      <div>
+        <div class="flex items-center mb-4px">
+          <img src={hasError ? icon1 : icon2} 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">
+          共导入 {total_number} 个账号，导入成功 {success_number} 个
+          {hasError && (
+            <span>
+              ，失败 <span class="color-#F64B31">{fail_number}</span> 个
+            </span>
+          )}
+        </p>
+        {hasError && (
+          <div
+            class="mt-8px text-14px lh-22px font-400 color-#6D4CFE cursor-pointer"
+            onClick={() => handleDownloadError(file)}
+          >
+            下载问题表格
+          </div>
+        )}
+      </div>
+    ),
+    duration: 3000,
+    class: `px-16px py-16px w-400px rounded-2px ${hasError ? 'bg-#FFF7E5' : 'bg-#EBF7F2'}`,
+  });
+};
\ No newline at end of file
diff --git a/src/utils/platform.ts b/src/utils/platform.ts
new file mode 100644
index 0000000..9a3c0d3
--- /dev/null
+++ b/src/utils/platform.ts
@@ -0,0 +1,55 @@
+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';
+import icon4 from '@/assets/img/media-account/icon-dy.png';
+import icon5 from '@/assets/img/media-account/icon-xhs.png';
+
+// 投放账户
+export enum ENUM_PUT_ACCOUNT_PLATFORM  {
+  jl =  0,
+  jg = 1,
+  bili = 2,
+};
+// 新媒体账号
+export enum ENUM_MEDIA_ACCOUNT_PLATFORM {
+  dy = 0,
+  xhs = 1,
+}
+
+export const PLATFORM_LIST = [
+  {
+    label: '巨量',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.jl,
+    icon: icon1,
+  },
+  {
+    label: '聚光',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.jg,
+    icon: icon2,
+  },
+  {
+    label: 'B站',
+    value: ENUM_PUT_ACCOUNT_PLATFORM.bili,
+    icon: icon3,
+  },
+];
+
+export const MEDIA_ACCOUNT_PLATFORMS = [
+  {
+    label: '抖音',
+    value: 0,
+    icon: icon4,
+  },
+  {
+    label: '小红书',
+    value: 1,
+    icon: icon5,
+  },
+];
+
+export const getPutAccountPlatformLogo = (value: ENUM_PUT_ACCOUNT_PLATFORM) => {
+  return PLATFORM_LIST.find((v) => v.value === value)?.icon ?? null;
+};
+export const getMediaAccountPlatformLogo = (value: ENUM_MEDIA_ACCOUNT_PLATFORM) => {
+  return MEDIA_ACCOUNT_PLATFORMS.find((v) => v.value === value)?.icon ?? null;
+};
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
index 105d541..7fa94db 100644
--- a/src/utils/tools.ts
+++ b/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));
 }
@@ -84,7 +85,7 @@ export function formatTableField(fieldItem: any, rowValue: any, showExactValue =
   return `${fieldItem.prefix || ''}${value}${fieldItem.suffix || ''}`;
 }
 
-export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm', otherYearFmt = 'YYYY-MM-DD HH:mm') {
+export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm:ss', otherYearFmt = 'YYYY-MM-DD HH:mm:ss') {
   if (!val) return '-';
   const year = dayjs(val * 1000).year();
   const currYear = dayjs().year();
@@ -105,3 +106,7 @@ export function downloadByUrl(url: string, filename?: string) {
   a.click();
   document.body.removeChild(a);
 }
+
+export function genRandomId() {
+  return `id_${Date.now()}_${Math.floor(Math.random() * 10000)}`;
+}
\ No newline at end of file
diff --git a/src/utils/user.ts b/src/utils/user.ts
index 8a6ff1a..599f788 100644
--- a/src/utils/user.ts
+++ b/src/utils/user.ts
@@ -12,13 +12,13 @@ import { useSidebarStore } from '@/stores/modules/side-bar';
 export function goUserLogin(query?: any) {
   router.push({ name: 'UserLogin', query });
 }
-// 初始化企业信息、navbar菜单、允许访问的路由
+
 export const getUserEnterpriseInfo = async () => {
   const enterpriseStore = useEnterpriseStore();
   const sidebarStore = useSidebarStore();
   const userStore = useUserStore();
 
-  await enterpriseStore.getEnterpriseInfo();
+  await enterpriseStore.getEnterpriseInfo(); // 初始化企业信息
   sidebarStore.getUserNavbarMenuList(); // 初始化navbar菜单
   userStore.getUserAllowAccessRoutes(); // 初始化允许访问的路由
 };
@@ -26,9 +26,11 @@ export const getUserEnterpriseInfo = async () => {
 // 登录处理
 export async function handleUserLogin() {
   const userStore = useUserStore();
+  const sidebarStore = useSidebarStore();
 
   await userStore.getUserInfo(); // 初始化用户信息
-  await getUserEnterpriseInfo();
+  await getUserEnterpriseInfo(); // 初始化企业信息、navbar菜单、允许访问的路由
+  sidebarStore.startUnreadInfoPolling(); // 初始化未读信息
 
   handleUserHome();
 }
@@ -38,18 +40,19 @@ export function handleUserHome() {
   router.push({ name: 'Home' });
 }
 
+// 登出处理
 export function handleUserLogout() {
   const userStore = useUserStore();
   const enterpriseStore = useEnterpriseStore();
   const sidebarStore = useSidebarStore();
 
-  userStore.clearUserInfo();
-  enterpriseStore.clearUserEnterpriseInfo();
-  sidebarStore.clearUserNavbarMenuList();
-  userStore.clearUserAllowAccessRoutes();
-
-  sidebarStore.clearActiveMenuId();
-  userStore.deleteToken();
+  userStore.clearUserInfo(); // 清除用户信息
+  userStore.clearToken(); // 清除token
+  enterpriseStore.clearUserEnterpriseInfo(); // 清除企业信息
+  sidebarStore.clearUserNavbarMenuList(); // 清除navbar菜单信息
+  userStore.clearUserAllowAccessRoutes(); // 清除权限路由列表
+  sidebarStore.stopUnreadInfoPolling(); // 清除未读消息
+  sidebarStore.clearActiveMenuId(); // 清除active菜单id
 
   goUserLogin();
 }
diff --git a/src/views/components/dataEngine/hotCloud.vue b/src/views/components/dataEngine/hotCloud.vue
index 4fcc36b..1536621 100644
--- a/src/views/components/dataEngine/hotCloud.vue
+++ b/src/views/components/dataEngine/hotCloud.vue
@@ -160,7 +160,7 @@ const processTagData = (apiData) => {
 };
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 /* 自定义样式 */
 :deep(.arco-table-th) {
   background-color: var(--color-fill-2);
@@ -219,7 +219,7 @@ a-tag:hover {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/dataEngine/hotTranslation.vue b/src/views/components/dataEngine/hotTranslation.vue
index c7a1fa8..1e3be9f 100644
--- a/src/views/components/dataEngine/hotTranslation.vue
+++ b/src/views/components/dataEngine/hotTranslation.vue
@@ -133,7 +133,7 @@
         </a-space>
       </div>
       <template #footer>
-        <a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
+        <a-button size="large" @click="handleCancel">取消</a-button>
         <a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
       </template>
     </a-modal>
@@ -354,7 +354,7 @@ const handleOk = () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -378,7 +378,7 @@ const handleOk = () => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -397,14 +397,6 @@ const handleOk = () => {
     justify-content: flex-end;
     align-items: center;
     border-top: 1px solid var(--Border-1, #d7d7d9);
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }
 </style>
diff --git a/src/views/components/dataEngine/keyBrandMovement.vue b/src/views/components/dataEngine/keyBrandMovement.vue
index 2bbc0ea..3e67d96 100644
--- a/src/views/components/dataEngine/keyBrandMovement.vue
+++ b/src/views/components/dataEngine/keyBrandMovement.vue
@@ -287,7 +287,7 @@ watch(selectedIndustry, () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index 65a8959..c462718 100644
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@@ -260,7 +260,7 @@
         </a-space>
       </div>
       <template #footer>
-        <a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
+        <a-button size="large" @click="handleCancel">取消</a-button>
         <a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
       </template>
     </a-modal>
@@ -659,7 +659,7 @@ onMounted(() => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -668,13 +668,13 @@ onMounted(() => {
 }
 .cts {
   color: var(--Text-2, #3c4043);
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px; /* 157.143% */
   &.num {
-    font-family: 'HarmonyOS Sans SC';
+    font-family: $font-family-manrope-regular;
   }
 }
 </style>
@@ -694,7 +694,7 @@ onMounted(() => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -713,14 +713,6 @@ onMounted(() => {
     justify-content: flex-end;
     align-items: center;
     border-top: 1px solid var(--Border-1, #d7d7d9);
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }
 </style>
diff --git a/src/views/components/dataEngine/userPainPoints.vue b/src/views/components/dataEngine/userPainPoints.vue
index 74bc9e5..e8cd5ca 100644
--- a/src/views/components/dataEngine/userPainPoints.vue
+++ b/src/views/components/dataEngine/userPainPoints.vue
@@ -110,7 +110,7 @@
         </a-space>
       </div>
       <template #footer>
-        <a-button size="large" class="cancel-btn" @click="handleCancel">取消</a-button>
+        <a-button size="large" @click="handleCancel">取消</a-button>
         <a-button type="primary" size="large" class="rounded-4px" @click="handleOk"> 确定 </a-button>
       </template>
     </a-modal>
@@ -276,7 +276,7 @@ const search = () => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -299,7 +299,7 @@ const search = () => {
     padding: 12px 20px 0;
     .cts {
       color: var(--Text-2, #3c4043);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -318,14 +318,6 @@ const search = () => {
     justify-content: flex-end;
     align-items: center;
     border-top: 1px solid var(--Border-1, #d7d7d9);
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }
 </style>
diff --git a/src/views/components/dataEngine/userPersona.vue b/src/views/components/dataEngine/userPersona.vue
index 8ae2b1d..53a053a 100644
--- a/src/views/components/dataEngine/userPersona.vue
+++ b/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 ? '女性' : '男性',
     }));
@@ -602,7 +605,7 @@ onMounted(() => {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 16px;
     font-style: normal;
     font-weight: 400;
@@ -611,13 +614,13 @@ onMounted(() => {
 }
 .cts {
   color: var(--Text-2, #3c4043);
-  font-family: 'PuHuiTi-Regular';
+  font-family: $font-family-regular;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
   line-height: 22px; /* 157.143% */
   &.num {
-    font-family: 'HarmonyOS Sans SC';
+    font-family: $font-family-manrope-regular;
   }
 }
 :deep(.arco-tabs) {
diff --git a/src/views/components/drag/DraggableResizable.vue b/src/views/components/drag/DraggableResizable.vue
index 911fabf..6d711ac 100644
--- a/src/views/components/drag/DraggableResizable.vue
+++ b/src/views/components/drag/DraggableResizable.vue
@@ -360,7 +360,7 @@ if (container.value) {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .draggable-resizable {
   position: absolute;
   background-color: lightblue;
diff --git a/src/views/components/drag/index.vue b/src/views/components/drag/index.vue
index 8dd64d1..d420b1d 100644
--- a/src/views/components/drag/index.vue
+++ b/src/views/components/drag/index.vue
@@ -447,7 +447,7 @@ const adjustComponentPosition = (
   return { x: adjustedX, y: adjustedY };
 };
 </script>
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .app {
   position: relative;
   width: 100%;
diff --git a/src/views/components/layout/comp1.vue b/src/views/components/layout/comp1.vue
index 72e332e..3e543a7 100644
--- a/src/views/components/layout/comp1.vue
+++ b/src/views/components/layout/comp1.vue
@@ -16,7 +16,7 @@
 
 <script setup lang="ts"></script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .flex-container {
   display: flex;
   flex-direction: row;
diff --git a/src/views/components/layout/comp2.vue b/src/views/components/layout/comp2.vue
index c6a9c93..dcddc9d 100644
--- a/src/views/components/layout/comp2.vue
+++ b/src/views/components/layout/comp2.vue
@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/layout/comp3.vue b/src/views/components/layout/comp3.vue
index a2f9505..2e04f2f 100644
--- a/src/views/components/layout/comp3.vue
+++ b/src/views/components/layout/comp3.vue
@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/layout/comp4.vue b/src/views/components/layout/comp4.vue
index 9c3bc35..222c6b5 100644
--- a/src/views/components/layout/comp4.vue
+++ b/src/views/components/layout/comp4.vue
@@ -10,4 +10,4 @@
 </template>
 
 <script setup lang="ts"></script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/layout/index.vue b/src/views/components/layout/index.vue
index fab9732..bcfa90e 100644
--- a/src/views/components/layout/index.vue
+++ b/src/views/components/layout/index.vue
@@ -380,7 +380,7 @@ function getComponentStyle(component: ComponentState) {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 .page-container {
   width: 100%;
   height: 100%;
diff --git a/src/views/components/login/index.vue b/src/views/components/login/index.vue
index efdf9ba..238c240 100644
--- a/src/views/components/login/index.vue
+++ b/src/views/components/login/index.vue
@@ -54,16 +54,15 @@
               </div>
             </a-form-item>
             <a-form-item hide-label class="mt-68px mb-16px">
-              <div
+              <a-button
                 type="primary"
-                class="w-480 h-48 text-16px rounded-8px text-center text-white leading-48px"
+                class="w-480 h-48 !text-16px !rounded-8px"
                 :class="disabledSubmitBtn ? 'cursor-no-drop' : 'cursor-pointer'"
-                :style="{ backgroundColor: disabledSubmitBtn ? '#C5B7FF' : '#6D4CFE' }"
                 :disabled="disabledSubmitBtn"
                 @click="handleSubmit"
               >
                 {{ isLogin ? '登录' : '注册并开通企业账号' }}
-              </div>
+              </a-button>
             </a-form-item>
           </a-form>
           <a-space class="text-12px color-#737478 justify-start items-center">
@@ -126,13 +125,16 @@
 <script setup lang="ts">
 import PuzzleVerification from './components/PuzzleVerification.vue';
 import { fetchLoginCaptCha, fetchAuthorizationsCaptcha, fetchProfileInfo } from '@/api/all/login';
+import { joinEnterpriseByInviteCode } from '@/api/all';
 import { ref, reactive, onUnmounted, computed } from 'vue';
 import { useUserStore } from '@/stores';
 import { useEnterpriseStore } from '@/stores/modules/enterprise';
 import { handleUserLogin } from '@/utils/user';
 import router from '@/router';
+import { useRoute } from 'vue-router';
 
 const formRef = ref();
+const route = useRoute();
 const userStore = useUserStore();
 const enterpriseStore = useEnterpriseStore();
 const countdown = ref(0);
@@ -145,7 +147,6 @@ const submitting = ref(false);
 const hasCheck = ref(false);
 const mobileNumber = ref('');
 const selectedAccountIndex = ref(0);
-
 const accounts = ref([]);
 
 const loginForm = reactive({
@@ -267,9 +268,9 @@ const getProfileInfo = async () => {
     let enterprises = data['enterprises'];
     mobileNumber.value = data['mobile'];
     accounts.value = enterprises;
-    enterpriseStore.setEnterpriseInfo(data);
 
     if (enterprises.length > 0) {
+      enterpriseStore.setEnterpriseInfo(data.enterprises[0]);
       if (enterprises.length === 1) {
         handleUserLogin();
       } else {
@@ -300,6 +301,15 @@ const handleSubmit = async () => {
       // 处理登录成功逻辑
       AMessage.success(isLogin.value ? '登录成功' : '注册成功');
       userStore.setToken(data.access_token);
+
+      const { invite_code } = route.query;
+      if (invite_code) {
+        const { code } = await joinEnterpriseByInviteCode(invite_code as string);
+        if (code === 200) {
+          AMessage.success('加入企业成功');
+        }
+      }
+
       getProfileInfo();
     }
   } catch (error) {
diff --git a/src/views/components/login/style.scss b/src/views/components/login/style.scss
index 94f0789..86cc319 100644
--- a/src/views/components/login/style.scss
+++ b/src/views/components/login/style.scss
@@ -39,7 +39,7 @@
     transform: translateX(-50%);
 
     .text {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
diff --git a/src/views/components/management/account/index.vue b/src/views/components/management/account/index.vue
index 4d95ce7..d688822 100644
--- a/src/views/components/management/account/index.vue
+++ b/src/views/components/management/account/index.vue
@@ -6,7 +6,7 @@
     </div>
     <a-table
       :columns="columns"
-      :data="data"
+      :data="dataSource"
       :pagination="pagination"
       class="mt-8px h-540px"
       @page-change="handlePageChange"
@@ -79,7 +79,7 @@ const columns = [
     slotName: 'action',
   },
 ];
-const data = ref([]);
+const dataSource = ref([]);
 const pagination = reactive({
   total: 0,
   showPageSize: true,
@@ -99,7 +99,9 @@ const addAccountVisible = ref(false);
 const deleteVisible = ref(false);
 const deleteTitle = ref('');
 
-const enterpriseInfo = store.enterpriseInfo;
+const enterpriseInfo = computed(() => {
+  return store.enterpriseInfo ?? {};
+});
 
 const okText = computed(() => {
   if (!canAddAccount.value) {
@@ -109,9 +111,9 @@ const okText = computed(() => {
 });
 const customerServiceVisible = ref(false);
 const canAddAccount = computed(() => {
-  if (!enterpriseInfo) return false;
+  if (!enterpriseInfo.value) return false;
 
-  return enterpriseInfo.sub_account_quota > enterpriseInfo.used_sub_account_count;
+  return enterpriseInfo.value.sub_account_quota > enterpriseInfo.value.used_sub_account_count;
 });
 
 const currentSelectAccount = ref();
@@ -130,10 +132,10 @@ function handlePageSizeChange(pageSize: number) {
 
 async function getSubAccount() {
   const res = await fetchSubAccountPage(params);
-  const { data, total, code } = res.data;
+  const { data, code } = res;
   if (code === 200) {
-    pagination.total = total;
-    data.value = data;
+    pagination.total = data.total;
+    dataSource.value = data?.data ?? [];
   }
 }
 async function handleAddAccount() {
@@ -178,13 +180,13 @@ onMounted(() => {
 });
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .primary-account {
   border-radius: 2px;
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Brand-Brand-1, rgba(240, 237, 255, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -195,7 +197,7 @@ onMounted(() => {
   padding-right: 8px;
   padding-left: 8px;
   background: var(--Functional-Warning-1, rgba(255, 245, 222, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: var(--Functional-Warning-6, rgba(255, 174, 0, 1));
@@ -204,7 +206,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 2px 12px;
   border: 1px solid var(--Functional-Danger-6, rgba(246, 75, 49, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   line-height: 20px;
@@ -214,7 +216,7 @@ onMounted(() => {
   border-radius: 4px;
   padding: 5px 16px;
   border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 14px;
   color: var(--Brand-Brand-6, rgba(109, 76, 254, 1));
@@ -224,14 +226,14 @@ onMounted(() => {
   margin-bottom: 12px;
   .add-account-title {
     margin: 0;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
   }
   .add-account-subtitle {
     margin: 4px 0 0 0;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -243,7 +245,7 @@ onMounted(() => {
     border-radius: 4px;
     padding: 12px 16px;
     background: var(--BG-200, rgba(242, 243, 245, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -254,7 +256,7 @@ onMounted(() => {
   }
   .cannot-add-account-title {
     margin: 0;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     color: var(--Text-1, rgba(33, 31, 36, 1));
@@ -267,7 +269,7 @@ onMounted(() => {
   .cannot-add-account-subtitle {
     margin: 16px 0 0 0;
     padding-left: 32px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -276,7 +278,7 @@ onMounted(() => {
 .delete-modal-content {
   margin-left: 34px;
   margin-top: 16px;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: var(--Text-2, rgba(60, 64, 67, 1));
@@ -289,7 +291,7 @@ onMounted(() => {
   justify-content: space-between;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/management/enterprise/index.vue b/src/views/components/management/enterprise/index.vue
index 6826ec3..95f3b8b 100644
--- a/src/views/components/management/enterprise/index.vue
+++ b/src/views/components/management/enterprise/index.vue
@@ -48,7 +48,9 @@ const form = reactive({
   name: '',
 });
 
-const enterpriseInfo = store.enterpriseInfo;
+const enterpriseInfo = computed(() => {
+  return store.enterpriseInfo ?? {};
+});
 
 const columns = [
   {
@@ -65,11 +67,13 @@ const infoVisible = ref(false);
 const customerServiceVisible = ref(false);
 
 const dataSource = computed(() => {
-  return enterpriseInfo ? [enterpriseInfo] : [];
+  return enterpriseInfo.value ? [enterpriseInfo.value] : [];
 });
+
+console.log({ dataSource });
 const canUpdate = computed(() => {
-  if (!enterpriseInfo) return false;
-  return enterpriseInfo.update_name_quota > enterpriseInfo.used_update_name_count;
+  if (!enterpriseInfo.value) return false;
+  return enterpriseInfo.value.update_name_quota > enterpriseInfo.value.used_update_name_count;
 });
 
 const okText = computed(() => {
@@ -81,7 +85,7 @@ const okText = computed(() => {
 
 function handleUpdate() {
   if (!canUpdate.value) {
-    form.name = enterpriseInfo!.name;
+    form.name = enterpriseInfo.value?.name;
   }
   infoVisible.value = true;
 }
@@ -98,14 +102,14 @@ async function handleOk() {
 }
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .tips {
   height: 40px;
   border-radius: 4px;
   padding: 10px 16px;
   background: var(--BG-100, rgba(247, 248, 250, 1));
   border: 1px solid var(--BG-300, rgba(230, 230, 232, 1));
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   span {
@@ -118,7 +122,7 @@ async function handleOk() {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -126,12 +130,12 @@ async function handleOk() {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -141,7 +145,7 @@ async function handleOk() {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
@@ -156,7 +160,7 @@ async function handleOk() {
   border: 1px solid rgba(109, 76, 254, 1);
   border-radius: 4px;
   padding: 2px 12px;
-  font-family: 'PuHuiTi-Medium';
+  font-family: $font-family-medium;
   font-weight: 400;
   font-size: 12px;
   color: rgba(109, 76, 254, 1);
@@ -168,7 +172,7 @@ async function handleOk() {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/management/person/index.vue b/src/views/components/management/person/index.vue
index bd57c3e..373d4f4 100644
--- a/src/views/components/management/person/index.vue
+++ b/src/views/components/management/person/index.vue
@@ -27,7 +27,7 @@
         :wrapper-col-props="{ span: 21, offset: 0 }"
       >
         <a-form-item field="head_image" label="头像">
-          <div class="flex item-center">
+          <div class="flex items-center">
             <a-avatar :image-url="userInfoForm.file_url" :size="48" />
             <span class="upload-button" @click="triggerFileInput">
               <input
@@ -91,7 +91,9 @@ import axios from 'axios';
 import { useUserStore } from '@/stores';
 
 const store = useUserStore();
-const userInfo = store.userInfo;
+const userInfo = computed(() => {
+  return store.userInfo ?? {};
+});
 
 const columns = [
   {
@@ -115,7 +117,7 @@ const isSendCaptcha = ref(false);
 const uploadInputRef = ref();
 
 const dataSource = computed(() => {
-  return userInfo ? [userInfo] : [];
+  return userInfo.value ? [userInfo.value] : [];
 });
 
 // 表单校验规则
@@ -261,7 +263,7 @@ function getFileExtension(filename: string): string {
     align-items: center;
   }
   :deep(.arco-form-item-label) {
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     margin: 0;
@@ -269,12 +271,12 @@ function getFileExtension(filename: string): string {
   :deep(.arco-input-wrapper) {
     background: white;
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 14px;
     padding: 4px 12px;
     input::placeholder {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       color: var(--Text-4, rgba(147, 148, 153, 1));
@@ -284,7 +286,7 @@ function getFileExtension(filename: string): string {
     background: var(--BG-200, rgba(242, 243, 245, 1));
     border: 1px solid var(--BG-400, rgba(215, 215, 217, 1));
     .arco-input:disabled {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
     }
@@ -304,7 +306,7 @@ function getFileExtension(filename: string): string {
     border-radius: 4px;
     padding: 2px 12px;
     border: 1px solid var(--BG-500, rgba(177, 178, 181, 1));
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     vertical-align: middle;
@@ -318,7 +320,7 @@ function getFileExtension(filename: string): string {
   align-items: center;
   .title {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 18px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/components/permission/auth.vue b/src/views/components/permission/auth.vue
index bb12785..9c8727c 100644
--- a/src/views/components/permission/auth.vue
+++ b/src/views/components/permission/auth.vue
@@ -30,5 +30,5 @@ function login() {
 }
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
\ No newline at end of file
diff --git a/src/views/components/permission/choose-enterprise.vue b/src/views/components/permission/choose-enterprise.vue
index f49517f..46763b0 100644
--- a/src/views/components/permission/choose-enterprise.vue
+++ b/src/views/components/permission/choose-enterprise.vue
@@ -15,5 +15,5 @@
 const enterprise = ref('');
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 </style>
\ No newline at end of file
diff --git a/src/views/components/table/index.vue b/src/views/components/table/index.vue
index aff4fc3..410c236 100644
--- a/src/views/components/table/index.vue
+++ b/src/views/components/table/index.vue
@@ -49,4 +49,4 @@ function add() {
 
 function deleteItem(record) {}
 </script>
-<style lang="less" scoped></style>
+<style lang="scss" scoped></style>
diff --git a/src/views/components/workplace/index.vue b/src/views/components/workplace/index.vue
index 66616e1..a672635 100644
--- a/src/views/components/workplace/index.vue
+++ b/src/views/components/workplace/index.vue
@@ -46,7 +46,7 @@ const getSuccessCaseList = async () => {
 };
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .container-body {
   padding-left: 24px !important;
   :deep(> div > .title) {
diff --git a/src/views/components/workplace/modules/case.vue b/src/views/components/workplace/modules/case.vue
index 237d78c..6da8614 100644
--- a/src/views/components/workplace/modules/case.vue
+++ b/src/views/components/workplace/modules/case.vue
@@ -89,7 +89,7 @@ interface SuccessCase {
   data: { label: string; value: string }[];
 }
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   width: 304px;
   height: 306px;
@@ -139,7 +139,7 @@ interface SuccessCase {
       max-width: 100%;
     }
     .title {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 14px;
       line-height: 22px;
@@ -151,7 +151,7 @@ interface SuccessCase {
       margin: 0;
       padding: 0;
       .keyword {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-weight: 400;
         font-size: 12px;
         line-height: 20px;
@@ -169,7 +169,7 @@ interface SuccessCase {
       line-height: 28px;
       text-align: center;
       .unit {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-weight: 400;
         font-size: 10px;
         line-height: 24px;
@@ -178,7 +178,7 @@ interface SuccessCase {
       }
     }
     .label {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 10px;
       line-height: 100%;
diff --git a/src/views/components/workplace/modules/product.vue b/src/views/components/workplace/modules/product.vue
index 9a5216a..616cecf 100644
--- a/src/views/components/workplace/modules/product.vue
+++ b/src/views/components/workplace/modules/product.vue
@@ -123,7 +123,7 @@ const gotoModule = (menuId: number) => {
   router.push({ name: routeMap[menuId] });
 };
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .container {
   width: 304px;
   height: 220px;
@@ -141,7 +141,7 @@ const gotoModule = (menuId: number) => {
     border-radius: 4px;
     padding-right: 8px;
     padding-left: 8px;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-weight: 400;
     font-size: 12px;
     line-height: 20px;
@@ -175,7 +175,7 @@ const gotoModule = (menuId: number) => {
     background: rgba(255, 245, 222, 1);
 
     :deep(.arco-statistic-title) {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -185,7 +185,7 @@ const gotoModule = (menuId: number) => {
     }
 
     :deep(.arco-statistic-value) {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 10px;
       color: var(--Functional-Warning-7, rgba(204, 139, 0, 1));
@@ -201,7 +201,7 @@ const gotoModule = (menuId: number) => {
 
     .title {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 16px;
       line-height: 24px;
@@ -211,7 +211,7 @@ const gotoModule = (menuId: number) => {
 
     .desc {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -228,7 +228,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       background-color: rgba(109, 76, 254, 1) !important;
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
@@ -244,7 +244,7 @@ const gotoModule = (menuId: number) => {
       gap: 8px;
       padding: 2px 12px;
       border: 1px solid var(--Brand-Brand-6, rgba(109, 76, 254, 1));
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-weight: 400;
       font-size: 12px;
       line-height: 20px;
diff --git a/src/views/property-marketing/brands/brand-materials/index.vue b/src/views/property-marketing/brands/brand-materials/index.vue
index 9715c2f..3e9edaa 100644
--- a/src/views/property-marketing/brands/brand-materials/index.vue
+++ b/src/views/property-marketing/brands/brand-materials/index.vue
@@ -21,13 +21,13 @@
             </a-space>
           </div>
           <div class="filter-row flex">
-            <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+            <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+            <a-button size="medium" @click="handleReset">
               <template #icon>
                 <icon-refresh />
               </template>
diff --git a/src/views/property-marketing/brands/brand-materials/style.scss b/src/views/property-marketing/brands/brand-materials/style.scss
index eedda5f..86e618c 100644
--- a/src/views/property-marketing/brands/brand-materials/style.scss
+++ b/src/views/property-marketing/brands/brand-materials/style.scss
@@ -3,23 +3,11 @@
   display: flex;
   flex-direction: column;
 
-  :deep(.search-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-    color: #6d4cfe;
-  }
-
   :deep(.edit-btn) {
     border: 1px solid var(--Brand-Brand-6, #6d4cfe);
     color: #6d4cfe;
   }
 
-  :deep(.reset-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--BG-500, #b1b2b5);
-    background: var(--BG-white, #fff);
-  }
-
   .table-wrap {
     width: 100%;
 
@@ -44,7 +32,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/component.scss b/src/views/property-marketing/component.scss
index c23d0db..982258f 100644
--- a/src/views/property-marketing/component.scss
+++ b/src/views/property-marketing/component.scss
@@ -1,29 +1,4 @@
-.arco-input-wrapper,
-.arco-select-view-single,
-.arco-textarea-wrapper,
-.arco-picker,
-.arco-select-view-multiple {
-  border-radius: 4px;
-  border-color: #d7d7d9;
-  background-color: #fff;
-  &:focus-within,
-  &.arco-input-focus,
-  &.arco-textarea-focus {
-    background-color: var(--color-bg-2);
-    border-color: rgb(var(--primary-6));
-    box-shadow: 0 0 0 0 var(--color-primary-light-2);
-  }
-}
 .arco-modal {
-  .cancel-btn {
-    border-radius: 4px;
-    border: 1px solid var(--BG-500, #b1b2b5);
-    background: var(--BG-white, #fff);
-    &:hover {
-      border: 1px solid var(--BG-500, #b1b2b5);
-    }
-  }
-
   .arco-modal-body {
     .arco-form-item {
       margin-bottom: 16px;
@@ -32,7 +7,7 @@
       }
       .arco-form-item-label {
         color: var(--Text-1, #211f24);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
index f45ee55..2fe0259 100644
--- a/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/businessAnalysisReport.vue
@@ -25,13 +25,13 @@
           </div>
 
           <div class="filter-row flex">
-            <a-button class="w-84px search-btn mr-12px" size="medium">
+            <a-button type="outline" class="mr-12px" size="medium">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button class="w-84px reset-btn" size="medium">
+            <a-button size="medium">
               <template #icon>
                 <icon-refresh />
               </template>
@@ -198,7 +198,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
index adaea54..0c7a42f 100644
--- a/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
+++ b/src/views/property-marketing/intelligent-solution/competitiveProductAnalysisReport.vue
@@ -25,13 +25,13 @@
           </div>
 
           <div class="filter-row flex">
-            <a-button class="w-84px search-btn mr-12px" size="medium">
+            <a-button type="outline" class="mr-12px" size="medium">
               <template #icon>
                 <icon-search />
               </template>
               <template #default>搜索</template>
             </a-button>
-            <a-button class="w-84px reset-btn" size="medium">
+            <a-button  size="medium">
               <template #icon>
                 <icon-refresh />
               </template>
@@ -190,7 +190,7 @@ const columns = [
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
index 6c51cd1..ae320c0 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
@@ -15,11 +15,11 @@
       >
     </div>
     <div class="flex items-center">
-      <a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
+      <a-button type="outline" class="w-110px mr-12px" size="medium" @click="handleExport">
         <template #icon> <icon-download /> </template>
         <template #default>导出数据</template>
       </a-button>
-      <a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
+      <a-button type="outline" class="w-110px" size="medium" @click="openCustomColumn">
         <template #icon>
           <img :src="icon1" width="14" height="14" />
         </template>
@@ -119,7 +119,7 @@
           }}
         </template>
         <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
-          <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
+          <a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
         </template>
 
         <template v-else-if="column.isRateField" #cell="{ record }">
@@ -148,7 +148,7 @@
       </a-table-column>
       <a-table-column data-index="operation" fixed="right" width="100" title="操作">
         <template #cell="{ record }">
-          <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
+          <a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
         </template>
       </a-table-column>
     </template>
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
index 15a6387..a395192 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue
index bb32412..c60a1a5 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/index.vue
@@ -65,7 +65,7 @@
 
     <template #footer>
       <div style="text-align: right">
-        <a-button class="mr-8px cancel-btn" size="medium" @click="close">取消</a-button>
+        <a-button class="mr-8px" size="medium" @click="close">取消</a-button>
         <a-button type="primary" size="medium" @click="onSubmit">确定</a-button>
       </div>
     </template>
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
index bdd491a..8901d4a 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/custom-column-modal/style.scss
@@ -22,7 +22,7 @@
             margin-bottom: 16px;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 16px;
               font-style: normal;
               font-weight: 400;
@@ -47,7 +47,7 @@
         flex-direction: column;
         .checked-title {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 16px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
             align-items: center;
             .text {
               color: var(--Text-1, #211f24);
-              font-family: 'PuHuiTi-Medium';
+              font-family: $font-family-medium;
               font-size: 14px;
               font-style: normal;
               font-weight: 400;
@@ -87,13 +87,5 @@
     }
   }
   .arco-modal-footer {
-    .cancel-btn {
-      border-radius: 4px;
-      border: 1px solid var(--BG-500, #b1b2b5);
-      background: var(--BG-white, #fff);
-      &:hover {
-        border: 1px solid var(--BG-500, #b1b2b5);
-      }
-    }
   }
 }
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
index d7a2089..8e1ce39 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
@@ -19,7 +19,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">分组</span>
         <a-space class="w-200px">
-          <GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
+          <CommonSelect v-model="query.group_ids" :options="groups" @change="handleSearch" />
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
@@ -31,7 +31,7 @@
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
+          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
         </a-space>
       </div>
     </div>
@@ -47,13 +47,13 @@
           </a-select>
         </a-space>
       </div>
-      <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+      <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
         <template #icon>
           <icon-search />
         </template>
         <template #default>搜索</template>
       </a-button>
-      <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+      <a-button class="w-84px" size="medium" @click="handleReset">
         <template #icon>
           <icon-refresh />
         </template>
@@ -66,9 +66,8 @@
 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
 import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
-import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
-import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
 import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
+import CommonSelect from '@/components/common-select';
 
 const props = defineProps({
   query: {
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
index ff7b556..48e2115 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
@@ -1,17 +1,4 @@
 .container {
-  :deep(.arco-input-wrapper),
-  :deep(.arco-select-view-single),
-  :deep(.arco-select-view-multiple) {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
   .filter-row {
     .filter-row-item {
       &:not(:last-child) {
@@ -20,7 +7,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-dashboard/index.vue b/src/views/property-marketing/media-account/account-dashboard/index.vue
index f6596ab..ced1f9e 100644
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@@ -65,7 +65,8 @@ import AccountTable from './components/account-table';
 import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
 import { formatNumberShow } from '@/utils/tools';
 import { INITIAL_QUERY, CARD_FIELDS } from './constants';
-import { downloadByUrl } from '@/utils/tools';
+// import { downloadByUrl } from '@/utils/tools';
+import { showExportNotification } from '@/utils/arcoD';
 
 import icon1 from '@/assets/img/icon-question.png';
 
@@ -139,7 +140,7 @@ const handleExport = () => {
   }).then((res) => {
     const { code, data } = res;
     if (code === 200) {
-      downloadByUrl(data.download_url);
+      showExportNotification(`正在下载“${data.name}”，请稍后...`);
     }
   });
 };
diff --git a/src/views/property-marketing/media-account/account-dashboard/style.scss b/src/views/property-marketing/media-account/account-dashboard/style.scss
index 5d17a82..16fd193 100644
--- a/src/views/property-marketing/media-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/style.scss
@@ -2,22 +2,12 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  :deep(.search-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-    color: #6d4cfe;
-  }
-  :deep(.reset-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--BG-500, #b1b2b5);
-    background: var(--BG-white, #fff);
-  }
   .filter-wrap {
     border-radius: 8px;
     border: 1px solid #e6e6e8;
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -37,7 +27,7 @@
         }
         .label {
           color: var(--Text-3, #737478);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
@@ -45,7 +35,7 @@
         }
         .value {
           color: var(--Text-1, #211f24);
-          font-family: 'HarmonyOS Sans SC';
+          font-family: $font-family-manrope-regular;
           font-size: 18px;
           font-style: normal;
           font-weight: 500;
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..06f1b32 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
@@ -8,14 +8,11 @@
       <span class="cts !text-18px !lh-26px title">账号信息</span>
     </div>
     <div class="account-info-box">
-      <div
-        v-for="(row, rowIdx) in getAccountInfoFields(dateType, showMore)"
-        :key="rowIdx"
-        class="grid grid-cols-4 mb-24px"
-      >
+      <div class="grid grid-cols-4">
         <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);
 
diff --git a/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss b/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
index 7147a6f..96cfce5 100644
--- a/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
+++ b/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;
+    }
+  }
 }
diff --git a/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts b/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
index 0c64862..b5fd6b7 100644
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
@@ -70,12 +70,12 @@ export const TABLE_COLUMNS = [
     align: 'right',
   },
 
-  {
-    title: '封面点击率',
-    dataIndex: 'cover_click_rate',
-    width: 180,
-    tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
-    align: 'right',
-    suffix: '%',
-  },
+  // {
+  //   title: '封面点击率',
+  //   dataIndex: 'cover_click_rate',
+  //   width: 180,
+  //   tooltip: '内容在被曝光后，用户点击进入的比例，反映封面与标题吸引力。',
+  //   align: 'right',
+  //   suffix: '%',
+  // },
 ];
diff --git a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
index 85e88f2..3ee11e6 100644
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@@ -36,13 +36,13 @@
           />
         </a-space>
       </div>
-      <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+      <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
         <template #icon>
           <icon-search />
         </template>
         <template #default>搜索</template>
       </a-button>
-      <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+      <a-button class="w-84px" size="medium" @click="handleReset">
         <template #icon>
           <icon-refresh />
         </template>
@@ -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();
diff --git a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
index 12d1404..e772b23 100644
--- a/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
@@ -1,18 +1,4 @@
 .note-table-wrap {
-  :deep(.arco-input-wrapper),
-  :deep(.arco-select-view-single),
-  :deep(.arco-select-view-multiple),
-  :deep(.arco-picker) {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
   .filter-row {
     .filter-row-item {
       &:not(:last-child) {
@@ -21,7 +7,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-detail/constants.ts b/src/views/property-marketing/media-account/account-detail/constants.ts
index 3eaaba4..63a5105 100644
--- a/src/views/property-marketing/media-account/account-detail/constants.ts
+++ b/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 groupArrayBySize<T extends { dataIndex: string; prop: string; title: string; tooltip: string }>(
-  fields: T[],
-  groupSize = 4,
-  dateType: string,
-): T[][] {
-  const result: T[][] = [];
-
-  for (let i = 0; i < fields.length; i += groupSize) {
-    result.push(fields.slice(i, i + groupSize));
-  }
+export function groupFieldsWithColSpan<
+  T extends { dataIndex: string; prop?: string; title: string; tooltip?: string; notDifferentiateDateType?: boolean },
+>(fields: T[], dateType: string): (T & { colSpan: number })[] {
   const labelPrefix = dateType === 'week' ? '近7天' : '近30天';
-
-  return result.map((item) => {
-    return item.map((item) => {
+  return fields.map((item) => {
+    const newItem = { ...item, colSpan: item.dataIndex === 'ai_evaluation' ? 2 : 1 };
+    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' },
-      { title: '项目分组', dataIndex: 'group.name' },
-      { title: '状态', dataIndex: 'status', type: 'status' },
-      { title: '运营人员', dataIndex: 'operator.name' },
-    ],
-    [
-      { title: 'AI评价', dataIndex: 'ai_evaluation' },
-      { title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。' },
-      {
-        title: '总赞藏数',
-        dataIndex: 'like_collect_number',
-        tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
-      },
-    ],
+    { title: '账号名称', dataIndex: 'name', notDifferentiateDateType: true },
+    { title: '数据更新时间', dataIndex: 'last_synced_at', notDifferentiateDateType: true },
+    { title: '平台', dataIndex: 'platform', notDifferentiateDateType: true },
+    { title: '状态', dataIndex: 'status', type: 'status', notDifferentiateDateType: true },
+    { title: '账号ID', dataIndex: 'account_id', notDifferentiateDateType: true },
+    { title: '手机号码', dataIndex: 'mobile', notDifferentiateDateType: true },
+    { title: '运营人员', dataIndex: 'operator.name', notDifferentiateDateType: true },
+    { title: '所属项目', dataIndex: 'group.name', notDifferentiateDateType: true },
+    { title: '分组', dataIndex: 'group.name', notDifferentiateDateType: true },
+    { title: '标签', dataIndex: 'tags', notDifferentiateDateType: true },
+    { title: 'AI评价', dataIndex: 'ai_evaluation', notDifferentiateDateType: true },
+    { title: '粉丝量', dataIndex: 'fans_number', tooltip: '账号的当前粉丝总数。', notDifferentiateDateType: true },
+    {
+      title: '总赞藏数',
+      notDifferentiateDateType: true,
+      dataIndex: 'like_collect_number',
+      tooltip: '账号所有内容获得的点赞数与收藏数总和，用于衡量历史内容的整体吸引力与认可度。',
+    },
   ];
-  const customFields = groupArrayBySize(CUSTOM_FIELDS, 4, dateType);
-  return showMore ? [...baseFields, ...customFields] : [...baseFields];
+  const allFields = showMore ? [...baseFields, ...CUSTOM_FIELDS] : baseFields.slice(0,8);
+  return groupFieldsWithColSpan(allFields, dateType);
 };
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-detail/style.scss b/src/views/property-marketing/media-account/account-detail/style.scss
index c69597f..40d5a29 100644
--- a/src/views/property-marketing/media-account/account-detail/style.scss
+++ b/src/views/property-marketing/media-account/account-detail/style.scss
@@ -4,13 +4,13 @@
   flex-direction: column;
   :deep(.cts) {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
     &.title {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
     }
   }
   :deep(.title-row) {
@@ -19,16 +19,6 @@
     padding: 10px 0;
     align-items: center;
   }
-  :deep(.search-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-    color: #6d4cfe;
-  }
-  :deep(.reset-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--BG-500, #b1b2b5);
-    background: var(--BG-white, #fff);
-  }
 
   .table-wrap {
     width: 100%;
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue b/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
index ac6f06e..071f7a6 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/delete-account.vue
@@ -15,7 +15,7 @@
       <span>确认删除 {{ accountName }} 这个账号吗？</span>
     </div>
     <template #footer>
-      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
         >确认删除</a-button
       >
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 9e0f558..48afc37 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,37 +4,72 @@
 -->
 <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">{{ getLastSyncedAt(item) }}</span>
+        </div>
         <div class="field-row">
           <span class="label">平台</span>
           <img :src="item.platform === 0 ? icon1 : icon2" width="16" height="16" />
         </div>
         <div class="field-row">
           <span class="label">账号ID</span>
-          <span class="cts">{{ item.account_id || '-' }}</span>
+          <span class="cts num">{{ item.account_id || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">手机号码</span>
-          <span class="cts">{{ item.mobile || '-' }}</span>
+          <span class="cts num">{{ item.mobile || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">运营人员</span>
           <span class="cts">{{ item.operator?.name || '-' }}</span>
         </div>
+        <div class="field-row">
+          <span class="label">所属项目</span>
+          <span v-if="!item.projects.length" class="cts">-</span>
+          <div v-else class="flex items-center">
+            <a-tooltip
+              v-if="item.projects.length > 2"
+              position="bottom"
+              :content="
+                item.projects
+                  .slice(2)
+                  .map((v) => v.name)
+                  .join(',')
+              "
+            >
+              <div class="tag-box">
+                <span class="text">{{ `+${item.projects.length - 2}` }}</span>
+              </div>
+            </a-tooltip>
+
+            <div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
+              <span class="text">{{ project.name }}</span>
+            </div>
+          </div>
+        </div>
         <div class="field-row">
           <span class="label">分组</span>
           <span class="cts">{{ item.group?.name || '-' }}</span>
@@ -65,47 +100,36 @@
         </div>
         <div class="operate-row">
           <a-dropdown trigger="hover">
-            <a-button class="w-52px search-btn mr-8px" size="mini">
+            <a-button class="w-52px mr-8px" type="outline" size="mini">
               <template #default>更多</template>
             </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
               >
               <a-doption class="color-#F64B31" @click="openDelete(item)">删除</a-doption>
             </template>
-            <a-button class="search-btn" size="mini" @click="onBtnClick(item)">
+            <a-button type="outline" size="mini" @click="onBtnClick(item)">
               <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="isSyncFailed(item)" 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 type="outline" class="mr-8px" size="mini" @click="onDeleteSyncStatus(item)">取消</a-button>
+          <a-button type="outline" class="" 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 +137,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 +150,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,13 +158,23 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  syncMediaAccounts: {
+    type: Array,
+    default: () => [],
+  },
   selectedItems: {
     type: Array,
     default: () => [],
   },
+  isLoadingTaskStatus: {
+    type: Boolean,
+    default: () => false,
+  },
 });
 
-const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
+const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete', 'updateSyncStatus']);
+
+const router = useRouter();
 
 const pauseAccountPatchModalRef = ref(null);
 const reauthorizeAccountModalRef = ref(null);
@@ -156,6 +194,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 +210,6 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  console.log({ item });
   const { id, platform, status } = item;
   const isUnauthorized = isUnauthorizedStatus(status);
   if (isUnauthorized) {
@@ -183,6 +226,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 +243,23 @@ const isAbnormalStatus = (status) => {
   ].includes(status);
 };
 
-const getTooltipText = (status) => {
-  return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
-};
+// const getTooltipText = (status) => {
+//   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 +268,45 @@ 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);
+  emits('updateSyncStatus', item);
+};
+const formatTime = (time) => {
+  return exactFormatTime(time, 'YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm:ss');
+};
+const getLastSyncedAt = (item) => {
+  const target = props.syncMediaAccounts.find((v) => v.id === item.id);
+  if (props.isLoadingTaskStatus && target) {
+    if (target?.status !== 0) {
+      return formatTime(target.last_synced_at);
+    }
+  }
+  return formatTime(item.last_synced_at);
+};
+const isSyncFailed = (item) => {
+  const target = props.syncMediaAccounts.find((v) => v.id === item.id);
+  return target?.status === 2;
+};
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue b/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
index 00e5218..68ff863 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/pause-account-patch.vue
@@ -9,7 +9,7 @@
       <span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
     </div>
     <template #footer>
-      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
     </template>
   </a-modal>
diff --git a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
index f8b5991..15882e1 100644
--- a/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/account-table/style.scss
@@ -1,9 +1,3 @@
-@mixin ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .card-container {
   flex: 1;
   display: grid;
@@ -17,20 +11,22 @@
     padding: 12px 16px 16px;
     display: flex;
     align-items: flex-start;
+    position: relative;
     .name {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
       margin-bottom: 11px;
+      width: fit-content;
       // line-height: 22px; /* 157.143% */
     }
     .label {
       margin-right: 20px;
       flex-shrink: 0;
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -44,11 +40,14 @@
       .cts {
         @include ellipsis;
         color: var(--Text-2, #3c4043);
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px; /* 166.667% */
+        &.num {
+          font-family: $font-family-manrope-regular;
+        }
       }
       .tag-box {
         display: flex;
@@ -61,7 +60,7 @@
         .text {
           @include ellipsis();
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 10px;
           font-style: normal;
           font-weight: 400;
@@ -75,6 +74,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;
@@ -82,8 +98,8 @@
       justify-content: flex-end;
       padding-top: 8px;
     }
-    &.checked { 
-      border: 1px solid var(--Brand-6, #6D4CFE);
+    &.checked {
+      border: 1px solid var(--Brand-6, #6d4cfe);
     }
   }
 }
diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
index d4a0770..7f9dab5 100644
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/index.vue
@@ -2,176 +2,32 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-25 17:51:46
 -->
-<template>
-  <a-modal
-    v-model:visible="visible"
-    :title="isEdit ? '编辑账号' : '添加账号'"
-    modal-class="add-account-modal"
-    width="500px"
-    :mask-closable="false"
-    @close="onClose"
-  >
-    <a-form ref="formRef" :model="form" :rules="rules" layout="horizontal" auto-label-width>
-      <a-form-item v-if="!isEdit" label="上传方式" required>
-        <a-radio-group v-model="uploadType">
-          <a-radio value="manual">手动添加账号</a-radio>
-          <a-radio value="batch">批量导入账号</a-radio>
-        </a-radio-group>
-      </a-form-item>
-
-      <!-- 批量导入账号模式下的内容 -->
-      <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';
+<script lang="jsx">
+import { ref, computed } from 'vue';
+import {
+  Modal,
+  Form,
+  FormItem,
+  Input,
+  RadioGroup,
+  Radio,
+  Upload,
+  Button,
+  Switch,
+  Tooltip,
+  Notification,
+  Message as AMessage,
+  Textarea,
+} from '@arco-design/web-vue';
 import AuthorizedAccountModal from '../authorized-account-modal';
-import ImportPromptModal from '../import-prompt-modal';
+// import ImportPromptModal from '../import-prompt-modal';
 import StatusBox from '../status-box';
+import SyncDataModal from '../sync-data-modal';
+import CommonSelect from '@/components/common-select';
 
+// import { downloadByUrl } from '@/utils/tools';
+import { showExportNotification } from '@/utils/arcoD';
+import { genRandomId } from '@/utils/tools';
 import {
   fetchAccountTags,
   fetchAccountGroups,
@@ -180,14 +36,15 @@ import {
   putMediaAccounts,
   getTemplateUrl,
   batchMediaAccounts,
+  getProjectList,
 } 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']);
+// import icon5 from '@/assets/img/media-account/icon-warn-1.png';
+// import icon6 from '@/assets/img/media-account/icon-success.png';
 
 const UploadStatus = {
   DEFAULT: 'default',
@@ -198,201 +55,401 @@ const INITIAL_FORM = {
   mobile: '',
   operator_name: '',
   holder_name: '',
-  platform: 0,
+  platform: 1,
   group_id: undefined,
   tag_ids: [],
+  project_ids: [],
   end_work_link: undefined,
   cookie: undefined,
 };
 
-const groupOptions = ref([]);
-const tagOptions = ref([]);
-const visible = ref(false);
-const uploadType = ref('manual');
-const uploadStatus = ref(UploadStatus.DEFAULT);
-const id = ref('');
-const isEdit = ref(false);
-const fileName = ref('');
-const formRef = ref();
-const file = ref(null);
-const authorizedAccountModalRef = ref(null);
-const importPromptModalRef = ref(null);
-const uploadRef = ref(null);
-const isCustomCookie = ref(false);
-const form = ref(cloneDeep(INITIAL_FORM));
+export default {
+  setup(props, { emit, expose }) {
+    const groupOptions = ref([]);
+    const tagOptions = ref([]);
+    const projects = ref([]);
+    const visible = ref(false);
+    const uploadType = ref('manual');
+    const uploadStatus = ref(UploadStatus.DEFAULT);
+    const id = ref('');
+    const isEdit = ref(false);
+    const fileName = ref('');
+    const formRef = ref();
+    const file = ref(null);
+    const authorizedAccountModalRef = ref(null);
+    // const importPromptModalRef = ref(null);
+    const uploadRef = ref(null);
+    const isCustomCookie = ref(false);
+    const form = ref(cloneDeep(INITIAL_FORM));
+    const syncDataModalRef = ref(null);
+    const importLoading = ref(false);
 
-const rules = {
-  mobile: [
-    {
-      required: true,
-      message: '请填写手机号',
-      trigger: ['blur', 'change'],
-    },
-    {
-      validator: (value, callback) => {
-        if (!/^1[3-9]\d{9}$/.test(value)) {
-          callback('手机号格式不正确');
-        } else {
-          callback();
-        }
-      },
-      trigger: ['blur', 'change'],
-    },
-  ],
-  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 rules = {
+      mobile: [
+        {
+          required: true,
+          message: '请填写手机号',
+          trigger: ['blur', 'change'],
+        },
+        {
+          validator: (value, callback) => {
+            if (!/^1[3-9]\d{9}$/.test(value)) {
+              callback('手机号格式不正确');
+            } else {
+              callback();
+            }
+          },
+          trigger: ['blur', 'change'],
+        },
+      ],
+      operator_name: [{ required: true, message: '请输入运营人员' }],
     };
-  }
-};
 
-const handleBatchImport = async () => {
-  try {
-    const formData = new FormData();
-    formData.append('file', file.value);
-
-    const { code } = await batchMediaAccounts(formData, {
-      headers: {
-        'Content-Type': 'multipart/form-data',
-      },
+    const isBatchImport = computed(() => uploadType.value === 'batch');
+    const confirmBtnText = computed(() => {
+      if (isBatchImport.value) {
+        return importLoading.value ? '导入中' : '确定导入';
+      } else if (isEdit.value) {
+        return '确定';
+      } else {
+        return isCustomCookie.value ? '确认添加' : '生成授权码';
+      }
     });
-    if (code === 200) {
-      AMessage.success('导入成功');
-      emits('update');
-      onClose();
-      importPromptModalRef.value.open();
-    } else {
-      uploadStatus.value = UploadStatus.ERROR;
+
+    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;
+      }
+    };
+    const getProjects = async () => {
+      const { code, data } = await getProjectList();
+      if (code === 200) {
+        projects.value = data;
+      }
+    };
+    function handleUpload(option) {
+      const { fileItem } = option;
+      uploadStatus.value = UploadStatus.WAITING;
+      file.value = fileItem.file;
+      fileName.value = fileItem.name;
     }
-  } 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) {
-    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();
+    function removeFile() {
+      fileName.value = '';
+      file.value = null;
+      importLoading.value = false;
+      uploadStatus.value = UploadStatus.DEFAULT;
     }
-  });
-}
+    const reset = () => {
+      formRef.value?.resetFields();
+      formRef.value?.clearValidate();
+      groupOptions.value = [];
+      tagOptions.value = [];
+      projects.value = [];
+      form.value = cloneDeep(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();
+      getProjects();
+      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;
+        }
 
-const startAuthorized = (id, platform) => {
-  authorizedAccountModalRef.value.open(id, platform);
+        importLoading.value = true;
+        const formData = new FormData();
+        formData.append('file', file.value);
+        const { code, data } = await batchMediaAccounts(formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data',
+          },
+        });
+        if (code === 200) {
+          const id = genRandomId();
+          showExportNotification(`正在导入“${file.value.name}”，请稍后...`, { id });
+          emit('startQueryTaskStatus', data.id, id);
+          onClose();
+        } else {
+          uploadStatus.value = UploadStatus.ERROR;
+        }
+      } catch (error) {
+        uploadStatus.value = UploadStatus.ERROR;
+      } finally {
+        importLoading.value = false;
+      }
+    };
+    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 renderLabel = (label, tooltipContent) => {
+      return (
+        <>
+          <span class="label">{label}</span>
+          <Tooltip content={tooltipContent}>
+            <icon-question-circle size="14" class="ml-4px color-#737478" />
+          </Tooltip>
+        </>
+      );
+    };
+
+    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="所属项目">
+                <CommonSelect
+                  v-model={form.value.project_ids}
+                  options={projects.value}
+                  placeholder="请选择…"
+                  size="large"
+                />
+              </FormItem>
+              <FormItem label="选择分组">
+                <CommonSelect
+                  v-model={form.value.group_id}
+                  multiple={false}
+                  options={groupOptions.value}
+                  placeholder="请选择…"
+                  size="large"
+                />
+              </FormItem>
+
+              <FormItem label="选择标签">
+                <CommonSelect 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>
+              <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"
+                    auto-size={{ minRows: 5, maxRows: 8 }}
+                  />
+                </FormItem>
+              )}
+            </>
+          )}
+        </Form>
+        <div style="display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px;">
+          <Button size="large" 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">
diff --git a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
index 0c22c12..7a8dfb3 100644
--- a/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/add-account-modal/style.scss
@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
         .tip {
           color: var(--Text-3, #737478);
           text-align: center;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 12px;
           font-style: normal;
           font-weight: 400;
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..dffa5c0 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,46 @@
         />
         <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="[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>
         </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,68 +74,96 @@
         </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" @click="handleRefreshQrCode">
+        重新生成
+      </a-button>
+      <a-button v-if="[MODAL_STATE.SUCCESS, MODAL_STATE.FAILED].includes(modalState)" size="large" @click="close">
+        取消
+      </a-button>
+      <a-button type="primary" size="large" @click="handleOk">
+        {{ confirmBtnText }}
+      </a-button>
     </template>
   </a-modal>
+
+  <SyncDataModal ref="syncDataModalRef" />
 </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 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';
 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);
+const syncDataModalRef = ref(null);
 
 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 +175,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 +204,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 +222,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 +241,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 +260,58 @@ 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) {
+    syncDataModalRef.value.open(id.value);
+    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/authorized-account-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
index a39d499..74a00ac 100644
--- a/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/authorized-account-modal/style.scss
@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Regular';
+    font-family: $font-family-regular;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
index 36ca462..8900a83 100644
--- a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/index.vue
@@ -30,7 +30,7 @@
       <a-form-item label="选择分组" required>
         <template v-if="editType === 'all'">
           <div class="flex items-center w-100%">
-            <GroupSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
+            <CommonSelect v-model="form.group_id" :options="groupOptions" :multiple="false" class="flex-1" />
           </div>
         </template>
       </a-form-item>
@@ -47,7 +47,7 @@
             <a-table-column title="选择分组" data-index="group_id">
               <template #cell="{ record }">
                 <div class="flex items-center w-100%">
-                  <GroupSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
+                  <CommonSelect v-model="record.group_id" :options="groupOptions" :multiple="false" />
                 </div>
               </template>
             </a-table-column>
@@ -56,7 +56,7 @@
       </template>
     </a-form>
     <template #footer>
-      <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" size="large" @click="onSubmit">确定</a-button>
     </template>
   </a-modal>
@@ -65,7 +65,7 @@
 <script setup>
 import { ref, reactive } from 'vue';
 import { fetchAccountGroups, batchPutGroup } from '@/api/all/propertyMarketing';
-import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
+import CommonSelect from '@/components/common-select';
 
 import icon1 from '@/assets/img/icon-question.png';
 
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
index 757020e..a560ce3 100644
--- a/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-group-modal/style.scss
@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
index bb173bb..f3881bb 100644
--- a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/index.vue
@@ -76,7 +76,7 @@
       </template>
     </a-form>
     <template #footer>
-      <a-button size="large" class="mr-16px cancel-btn" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" size="large" @click="onSubmit">确定</a-button>
     </template>
   </a-modal>
diff --git a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
index b006d41..ab567fc 100644
--- a/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/batch-tag-modal/style.scss
@@ -6,7 +6,7 @@
     // min-height: 200px;
     .t1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
index 0734e15..479e9e5 100644
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/index.vue
@@ -33,16 +33,20 @@
         <span class="label">平台</span>
         <a-space class="w-160px">
           <a-select v-model="query.platform" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option v-for="(item, index) in PLATFORM_LIST" :key="index" :value="item.value" :label="item.label">{{
-              item.label
-            }}</a-option>
+            <a-option
+              v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
+              :key="index"
+              :value="item.value"
+              :label="item.label"
+              >{{ item.label }}</a-option
+            >
           </a-select>
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
+          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
         </a-space>
       </div>
     </div>
@@ -50,22 +54,28 @@
       <div class="filter-row-item flex items-center">
         <span class="label">分组</span>
         <a-space class="w-200px">
-          <GroupSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
+          <CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">所属项目</span>
+        <a-space class="w-200px">
+          <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">标签</span>
         <a-space class="w-320px">
-          <TagSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
+          <CommonSelect v-model="query.tag_ids" :options="tags" @change="handleSearch" />
         </a-space>
       </div>
-      <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+      <a-button type="outline" class="w-84px mr-12px" size="medium" @click="handleSearch">
         <template #icon>
           <icon-search />
         </template>
         <template #default>搜索</template>
       </a-button>
-      <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+      <a-button class="w-84px" size="medium" @click="handleReset">
         <template #icon>
           <icon-refresh />
         </template>
@@ -77,13 +87,17 @@
 
 <script setup>
 import { reactive, defineEmits, defineProps } from 'vue';
-import { fetchAccountTags, fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
-import TagSelect from '@/views/property-marketing/media-account/components/tag-select';
-import GroupSelect from '@/views/property-marketing/media-account/components/group-select';
-import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select';
+import {
+  fetchAccountTags,
+  getProjectList,
+  fetchAccountGroups,
+  fetchAccountOperators,
+} from '@/api/all/propertyMarketing';
 import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
+import CommonSelect from '@/components/common-select';
 
-import { INITIAL_QUERY, PLATFORM_LIST } from '@/views/property-marketing/media-account/account-manage/constants';
+import { INITIAL_QUERY } from '@/views/property-marketing/media-account/account-manage/constants';
+import { MEDIA_ACCOUNT_PLATFORMS } from '@/utils/platform';
 
 const props = defineProps({
   query: {
@@ -97,6 +111,7 @@ const emits = defineEmits('onSearch', 'onReset', 'update:query');
 const tags = ref([]);
 const groups = ref([]);
 const operators = ref([]);
+const projects = ref([]);
 
 const handleSearch = () => {
   emits('update:query', props.query);
@@ -127,11 +142,18 @@ const getOperators = async () => {
     operators.value = data;
   }
 };
+const getProjects = async () => {
+  const { code, data } = await getProjectList();
+  if (code === 200) {
+    projects.value = data;
+  }
+};
 
 onMounted(() => {
   getTags();
   getGroups();
   getOperators();
+  getProjects();
 });
 
 defineExpose({
diff --git a/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
index ff7b556..48e2115 100644
--- a/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/filter-block/style.scss
@@ -1,17 +1,4 @@
 .container {
-  :deep(.arco-input-wrapper),
-  :deep(.arco-select-view-single),
-  :deep(.arco-select-view-multiple) {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
   .filter-row {
     .filter-row-item {
       &:not(:last-child) {
@@ -20,7 +7,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
index d208936..ec82283 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/add-group.vue
@@ -16,7 +16,7 @@
       </a-form-item>
     </a-form>
     <template #footer>
-      <a-button class="cancel-btn" @click="onClose">取消</a-button>
+      <a-button @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
     </template>
   </a-modal>
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
index 8d19023..647bac4 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/delete-group.vue
@@ -9,7 +9,7 @@
       <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
     </div>
     <template #footer>
-      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
         >确认删除</a-button
       >
diff --git a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
index 4ab43ab..59c92e2 100644
--- a/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/group-manage-modal/style.scss
@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-prepend {
           color: var(--Text-2, #3c4043);
           text-align: right;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
index 8199a9a..5239f6b 100644
--- a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/index.vue
@@ -21,7 +21,7 @@
       </div>
     </div>
     <template #footer>
-      <a-button size="large" class="cancel-btn" @click="close">取消</a-button>
+      <a-button size="large" @click="close">取消</a-button>
       <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
     </template>
   </a-modal>
diff --git a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
index 5475c36..85f9419 100644
--- a/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/import-prompt-modal/style.scss
@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
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..1ae4e00 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,42 +25,97 @@
         />
         <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" @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>
+
+  <SyncDataModal ref="syncDataModalRef" />
 </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 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';
@@ -112,144 +123,149 @@ 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);
+const syncDataModalRef = ref(null);
 
 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 +279,7 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
+
 const clearOverdueTimer = () => {
   if (overdueTimer) {
     clearTimeout(overdueTimer);
@@ -270,52 +287,57 @@ 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();
-      }
+      syncDataModalRef.value.open(id.value);
+      close();
     }
+    return;
+  }
+
+  // 授权失败，重新扫码
+  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/style.scss b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
index 4d5df74..0c7c83b 100644
--- a/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/components/reauthorize-account-modal/style.scss
@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue b/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
index e3cdb36..174bd1f 100644
--- a/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/status-box/index.vue
@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
 
   .text {
     color: var(--BG-700, #737478);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
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
new file mode 100644
index 0000000..83133f6
--- /dev/null
+++ b/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" @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>
diff --git a/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/style.scss b/src/views/property-marketing/media-account/account-manage/components/sync-data-modal/style.scss
new file mode 100644
index 0000000..20c5586
--- /dev/null
+++ b/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% */
+    }
+  }
+}
diff --git a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
index 25e3058..c456871 100644
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/add-tag.vue
@@ -1,7 +1,3 @@
-<!--
- * @Author: AI
- * @Date: 2025-06-27
--->
 <template>
   <a-modal
     v-model:visible="visible"
@@ -16,7 +12,7 @@
       </a-form-item>
     </a-form>
     <template #footer>
-      <a-button class="cancel-btn" @click="onClose">取消</a-button>
+      <a-button @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
     </template>
   </a-modal>
diff --git a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
index eb183b7..f48ddb6 100644
--- a/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
+++ b/src/views/property-marketing/media-account/account-manage/components/tags-manage-modal/delete-tag.vue
@@ -9,7 +9,7 @@
       <span>确认删除 "{{ tagName }}" 这个标签吗？</span>
     </div>
     <template #footer>
-      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
         >确认删除</a-button
       >
diff --git a/src/views/property-marketing/media-account/account-manage/constants.ts b/src/views/property-marketing/media-account/account-manage/constants.ts
index a931f03..70da768 100644
--- a/src/views/property-marketing/media-account/account-manage/constants.ts
+++ b/src/views/property-marketing/media-account/account-manage/constants.ts
@@ -9,11 +9,12 @@ export const INITIAL_QUERY = {
   operator_id: '',
   group_ids: [],
   tag_ids: [],
+  project_ids: [],
 };
 
 export const INITIAL_PAGE_INFO = {
   page: 1,
-  pageSize: 8,
+  pageSize: 20,
   total: 0,
 };
 
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..8a974c3 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -8,19 +8,19 @@
       <div class="top flex h-64px px-24px py-10px justify-between items-center">
         <p class="text-18px font-400 lh-26px color-#211F24 title">账号管理</p>
         <div class="flex items-center">
-          <a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenTagsModal">
+          <a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenTagsModal">
             <template #icon>
               <img :src="icon3" width="16" height="16" />
             </template>
             <template #default>标签管理</template>
           </a-button>
-          <a-button class="w-112px mr-12px search-btn" size="medium" @click="handleOpenGroupModal">
+          <a-button class="w-112px mr-12px" type="outline" size="medium" @click="handleOpenGroupModal">
             <template #icon>
               <img :src="icon2" width="16" height="16" />
             </template>
             <template #default>分组管理</template>
           </a-button>
-          <a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
+          <a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
             <template #icon>
               <img :src="icon1" width="16" height="16" />
             </template>
@@ -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>
@@ -67,7 +70,7 @@
       </template>
       <div v-else>
         <a-space v-if="isAbNormalStatus" class="flex items-center">
-          <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
+          <a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
             <template #default>查看异常账号</template>
           </a-button>
         </a-space>
@@ -76,12 +79,15 @@
     <div class="card-wrap">
       <AccountTable
         v-if="dataSource.length > 0"
+        :syncMediaAccounts="syncMediaAccounts"
+        :isLoadingTaskStatus="isLoadingTaskStatus"
         :dataSource="dataSource"
         :selectedItems="selectedItems"
         @selectionChange="handleSelectionChange"
         @delete="handleDelete"
         @openEdit="handleOpenEdit"
         @update="getData"
+        @updateSyncStatus="handleUpdateSyncStatus"
       />
       <NoData v-else />
 
@@ -91,7 +97,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"
@@ -102,7 +109,7 @@
 
     <GroupManageModal ref="groupManageModalRef" @update="filterBlockRef?.getGroups" />
     <TagsManageModal ref="tagsManageModalRef" @update="filterBlockRef?.getTags" />
-    <AddAccountModal ref="addAccountModalRef" @update="getData" />
+    <AddAccountModal ref="addAccountModalRef" @update="getData" @startQueryTaskStatus="handleGetImportTaskStatus" />
 
     <DeleteAccountModal ref="deleteAccountRef" @update="getData" @batchUpdate="onBatchSuccess" />
     <BatchTagModal ref="batchTagModalRef" @update="onBatchSuccess" />
@@ -111,7 +118,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue';
+import { ref, provide } from 'vue';
+import { Notification } from '@arco-design/web-vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
@@ -123,7 +131,16 @@ import BatchTagModal from './components/batch-tag-modal';
 import BatchGroupModal from './components/batch-group-modal';
 
 import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
-import { getMediaAccounts, getMediaAccountsHealth } from '@/api/all/propertyMarketing';
+import { showImportResultNotification } from '@/utils/arcoD';
+import { EnumStatus } from '@/views/property-marketing/media-account/components/status-select/constants';
+import { getTaskStatus } from '@/api/all/common';
+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 +149,9 @@ 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;
+let queryTaskTimer = null;
+
 const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
@@ -145,8 +165,11 @@ const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
 const selectedItems = ref([]);
 const healthData = ref({});
+const syncMediaAccounts = ref([]);
+const isLoadingTaskStatus = ref(false); // 正在查询状态中
 
-const isAbNormalStatus = computed(() => healthData.value?.abnormal_number > 0);
+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(
@@ -159,27 +182,27 @@ 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,
+    abnormal_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: '数据缺失' },
+    { count: abnormal_number, label: '其他异常' },
   ];
 
   // 过滤出有异常的项并格式化
   const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
 
-  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
-});
-
-onMounted(() => {
-  getData();
+  return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
 const getData = () => {
@@ -210,7 +233,7 @@ const reload = () => {
   getData();
 };
 const handleSearch = () => {
-  getData();
+  reload();
 };
 const handleReset = () => {
   pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
@@ -260,10 +283,62 @@ 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();
+      isLoadingTaskStatus.value = false;
+      getData();
+    }
+  }
+};
+const handleUpdateSyncStatus = (item) => {
+  const target = syncMediaAccounts.value.find((v) => v.id === item.id);
+  // 点击取消，设置状态为成功
+  if (target) {
+    target.status = 1;
+  }
+};
+
+const startSyncDataPolling = () => {
+  isLoadingTaskStatus.value = true;
+  clearSyncDataTimer();
+
+  getAsyncStatus();
+  syncDataTimer = setInterval(getAsyncStatus, 3000);
+};
+
+const handleSyncData = async (item) => {
+  const { code } = await postSyncMediaAccountData(item.id);
+  if (code === 200) {
+    if (!isLoadingTaskStatus.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 (!isLoadingTaskStatus.value) {
+      startSyncDataPolling();
+    }
+  }
+};
 const handleBatchGroup = () => {
   batchGroupModalRef.value?.open(selectedItems.value);
 };
@@ -275,6 +350,46 @@ const handleOpenAbnormalAccount = () => {
   query.value.status = 2;
   reload();
 };
+
+// 查询导入账号任务状态
+const getSyncTaskStatus = async (id, notificationId) => {
+  const { code, data } = await getTaskStatus(id);
+  if (code === 200) {
+    if (data?.status !== 0) {
+      clearQueryTaskTimer();
+      notificationId && Notification.remove(notificationId);
+      showImportResultNotification(data);
+      getData();
+    }
+  }
+};
+const handleGetImportTaskStatus = (id, notificationId) => {
+  clearQueryTaskTimer();
+  getSyncTaskStatus(id, notificationId);
+  queryTaskTimer = setInterval(() => getSyncTaskStatus(id, notificationId), 3000);
+};
+const clearSyncDataTimer = () => {
+  if (syncDataTimer) {
+    clearInterval(syncDataTimer);
+    syncDataTimer = null;
+  }
+};
+const clearQueryTaskTimer = () => {
+  if (queryTaskTimer) {
+    clearInterval(queryTaskTimer);
+    queryTaskTimer = null;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+onUnmounted(() => {
+  clearSyncDataTimer();
+  clearQueryTaskTimer();
+});
+
+provide('handleSyncData', handleSyncData);
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/property-marketing/media-account/account-manage/style.scss b/src/views/property-marketing/media-account/account-manage/style.scss
index 05d08d9..5e6419a 100644
--- a/src/views/property-marketing/media-account/account-manage/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@@ -2,20 +2,10 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  :deep(.search-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-    color: #6d4cfe;
-  }
-  :deep(.reset-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--BG-500, #b1b2b5);
-    background: var(--BG-white, #fff);
-  }
   .filter-wrap {
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -29,7 +19,7 @@
     border-radius: 2px;
     background: #f0edff;
     .label {
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -47,20 +37,11 @@
         color: #211f24;
       }
     }
-    .err-btn {
-      background-color: #f64b31 !important;
-      color: var(--BG-white, #fff);
-      font-family: 'PingFang SC';
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 166.667% */
-    }
     .operation-btn {
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -71,6 +52,10 @@
       &.red {
         color: #F64B31;
       }
+      &.disabled {
+        color: #C5B7FF;
+        cursor: not-allowed;
+      }
     }
   }
   .card-wrap {
diff --git a/src/views/property-marketing/media-account/components/group-select/index.vue b/src/views/property-marketing/media-account/components/group-select/index.vue
deleted file mode 100644
index a441bfb..0000000
--- a/src/views/property-marketing/media-account/components/group-select/index.vue
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-25 14:02:40
--->
-<template>
-  <a-select
-    v-model="selectedGroups"
-    :multiple="multiple"
-    size="medium"
-    :placeholder="placeholder"
-    allow-clear
-    @change="handleChange"
-  >
-    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
-      {{ item.name }}
-    </a-option>
-  </a-select>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [Array, String, Number],
-    default: () => [],
-  },
-  multiple: {
-    type: Boolean,
-    default: true,
-  },
-  placeholder: {
-    type: String,
-    default: '全部',
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emits = defineEmits(['update:modelValue', 'change']);
-
-const selectedGroups = ref(props.multiple ? [] : '');
-
-// 监听外部传入的值变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    selectedGroups.value = newVal;
-  },
-  { immediate: true },
-);
-// 监听内部值变化，向外部发送更新
-watch(selectedGroups, (newVal) => {
-  emits('update:modelValue', newVal);
-});
-
-const handleChange = (value) => {
-  selectedGroups.value = value;
-  emits('change', value);
-};
-</script>
diff --git a/src/views/property-marketing/media-account/components/operator-select/index.vue b/src/views/property-marketing/media-account/components/operator-select/index.vue
deleted file mode 100644
index 2c50673..0000000
--- a/src/views/property-marketing/media-account/components/operator-select/index.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-25 14:02:40
--->
-<template>
-  <a-select
-    v-model="selectedOperators"
-    :multiple="multiple"
-    size="medium"
-    :placeholder="placeholder"
-    allow-clear
-    @change="handleChange"
-  >
-    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
-      {{ item.name }}
-    </a-option>
-  </a-select>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [Array, String, Number],
-    default: () => [],
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: '全部',
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emits = defineEmits(['update:modelValue', 'change']);
-
-const selectedOperators = ref(props.multiple ? [] : '');
-
-// 监听外部传入的值变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    selectedOperators.value = newVal;
-  },
-  { immediate: true },
-);
-
-// 监听内部值变化，向外部发送更新
-watch(selectedOperators, (newVal) => {
-  emits('update:modelValue', newVal);
-});
-
-const handleChange = (value) => {
-  selectedOperators.value = value;
-  emits('change', value);
-};
-</script>
diff --git a/src/views/property-marketing/media-account/components/status-select/constants.ts b/src/views/property-marketing/media-account/components/status-select/constants.ts
index 4713f42..7049295 100644
--- a/src/views/property-marketing/media-account/components/status-select/constants.ts
+++ b/src/views/property-marketing/media-account/components/status-select/constants.ts
@@ -5,8 +5,8 @@
 export enum EnumStatus {
   UNAUTHORIZED = 0,
   NORMAL = 1,
-  ABNORMAL = 2,
-  PAUSE = 3,
+  ABNORMAL = 3,
+  PAUSE = 2,
   ABNORMAL_LOGIN = 4,
   ABNORMAL_REQUEST = 5,
   ABNORMAL_FREEZE = 6,
diff --git a/src/views/property-marketing/media-account/components/status-select/index.vue b/src/views/property-marketing/media-account/components/status-select/index.vue
index ff8be64..b327655 100644
--- a/src/views/property-marketing/media-account/components/status-select/index.vue
+++ b/src/views/property-marketing/media-account/components/status-select/index.vue
@@ -19,7 +19,7 @@
 
 <script setup>
 import { ref, watch } from 'vue';
-import { STATUS_LIST } from './constants';
+import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
 
 const props = defineProps({
   modelValue: {
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
new file mode 100644
index 0000000..15cb4f9
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/index.vue
@@ -0,0 +1,156 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="添加项目"
+    modal-class="add-project-modal"
+    width="960px"
+    :mask-closable="false"
+    @close="onClose"
+  >
+    <div class="content">
+      <a-steps changeable :current="currentStep" @change="setCurrent" class="mb-24px mx-79px">
+        <a-step v-for="(step, index) in STEPS" :key="index">{{ step.label }}</a-step>
+      </a-steps>
+
+      <component :is="activeComp" v-model:formQuery="formQuery" ref="compRef" />
+    </div>
+    <template #footer>
+      <div class="flex justify-between items-center w-100%">
+        <div>
+          <a-button type="outline" size="medium" @click="onPrev" v-if="!isFirstStep">上一步</a-button>
+        </div>
+        <div class="flex items-center">
+          <a-button size="medium" class="mr-8px" @click="onCancel">取消</a-button>
+          <a-button type="primary" size="medium" @click="onSubmit">{{ isLastStep ? '确认添加' : '下一步' }}</a-button>
+        </div>
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { postAddProject, putProject, getProjectDetail } from '@/api/all/propertyMarketing';
+
+import StepOne from './stepOne.vue';
+import StepTwo from './stepTwo.vue';
+import StepThree from './stepThree.vue';
+import StepFour from './stepFour.vue';
+
+const STEPS = [
+  {
+    label: '项目信息',
+    index: 1,
+    comp: StepOne,
+  },
+  {
+    label: '关联平台账号',
+    index: 2,
+    comp: StepTwo,
+  },
+  {
+    label: '关联渠道账户',
+    index: 3,
+    comp: StepThree,
+  },
+  {
+    label: '关联内容稿件',
+    index: 4,
+    comp: StepFour,
+  },
+];
+const INITIAL_QUERY = {
+  name: '',
+  budget: '',
+  target: '',
+  background: '',
+  media_account_ids: [],
+  placement_account_ids: [],
+  work_ids: [],
+};
+
+const update = inject('update');
+
+const visible = ref(false);
+const currentStep = ref(1);
+const formQuery = ref(cloneDeep(INITIAL_QUERY));
+const compRef = ref(null);
+const projectId = ref(null);
+
+const isFirstStep = computed(() => currentStep.value === 1);
+const isEdit = computed(() => projectId.value);
+const isLastStep = computed(() => currentStep.value === STEPS.length);
+const activeComp = computed(() => STEPS.find((v) => v.index === currentStep.value)?.comp ?? null);
+
+const open = (id = null) => {
+  projectId.value = id;
+
+  if (id) {
+    getDetail();
+  }
+
+  visible.value = true;
+};
+const getDetail = (id) => {
+  getProjectDetail(projectId.value).then((res) => {
+    if (res.code === 200) {
+      formQuery.value = res.data;
+    }
+  });
+};
+const onClose = () => {
+  currentStep.value = 1;
+  formQuery.value = cloneDeep(INITIAL_QUERY);
+  projectId.value = '';
+  compRef.value?.reset?.();
+
+  visible.value = false;
+};
+const onCancel = () => {
+  visible.value = false;
+};
+
+const onSubmit = async () => {
+  if (isFirstStep.value) {
+    const valid = await compRef.value.validate();
+    if (!valid) {
+      return;
+    }
+  }
+
+  if (isLastStep.value) {
+    isEdit.value ? handleEdit() : handleAdd();
+  } else {
+    currentStep.value++;
+  }
+};
+const handleAdd = () => {
+  postAddProject(formQuery.value).then((res) => {
+    if (res.code === 200) {
+      onClose();
+      update();
+    }
+  });
+};
+const handleEdit = () => {
+  putProject({ id: projectId.value, ...formQuery.value }).then((res) => {
+    if (res.code === 200) {
+      onClose();
+      update();
+    }
+  });
+};
+
+const setCurrent = async (current) => {
+  if (isFirstStep.value) {
+    const valid = await compRef.value.validate();
+    if (!valid) {
+      return;
+    }
+  }
+  currentStep.value = current;
+};
+const onPrev = () => {
+  currentStep.value--;
+};
+defineExpose({ open });
+</script>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
new file mode 100644
index 0000000..2e32d26
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepFour.vue
@@ -0,0 +1,267 @@
+<template>
+  <div class="table-wrap flex h-448px">
+    <div class="left flex-1 pr-12px flex flex-col">
+      <div class="flex items-center mb-16px">
+        <a-input
+          v-model="query.uid"
+          class="w-160px mr-16px"
+          placeholder="搜索序号"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+        <a-input
+          v-model="query.title"
+          class="w-220px mr-16px"
+          placeholder="搜索内容稿件标题"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+
+        <a-select
+          v-model="query.uploader_id"
+          size="medium"
+          placeholder="选择上传人员"
+          class="w-160px"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option v-for="(item, index) in uploaders" :key="index" :value="item.id" :label="item.name">
+            {{ item.name || '-' }}
+          </a-option>
+        </a-select>
+      </div>
+      <a-table
+        ref="tableRef"
+        :data="dataSource"
+        column-resizable
+        row-key="id"
+        :row-selection="rowSelection"
+        :pagination="false"
+        :scroll="{ x: '100%', y: '100%' }"
+        class="flex-1 overflow-hidden"
+        :selected-keys="selectedRowKeys"
+        bordered
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+      >
+        <template #empty>
+          <NoData text="暂无账户" />
+        </template>
+        <template #columns>
+          <a-table-column
+            v-for="column in TABLE_COLUMNS"
+            :key="column.dataIndex"
+            :data-index="column.dataIndex"
+            :fixed="column.fixed"
+            :width="column.width"
+            :min-width="column.minWidth"
+            :sortable="column.sortable"
+            :align="column.align"
+            ellipsis
+            tooltip
+          >
+            <template #title>
+              <div class="flex items-center">
+                <span class="cts mr-4px">{{ column.title }}</span>
+                <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                  <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+                </a-tooltip>
+              </div>
+            </template>
+
+            <template #cell="{ record }">
+              <template v-if="column.dataIndex === 'created_at'">
+                {{ exactFormatTime(record.created_at) }}
+              </template>
+              <template v-else>
+                {{ formatTableField(column, record, true) }}
+              </template>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </div>
+    <div class="right w-320px px-12px flex flex-col">
+      <div class="flex justify-between">
+        <p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
+        <a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
+      </div>
+      <div class="flex-1 overflow-y-auto overflow-x-hidden">
+        <template v-if="selectedRows?.length">
+          <div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
+            <a-tooltip :content="item.name">
+              <p class="name mr-4px">{{ item.name || '-' }}</p>
+            </a-tooltip>
+            <icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
+          </div>
+        </template>
+        <NoData v-else text="暂无账户" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { formatTableField, exactFormatTime } from '@/utils/tools';
+
+import { getPlacementAccountOperators, getWorksList } from '@/api/all/propertyMarketing';
+import { getUserList } from '@/api/all/common';
+
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+const TABLE_COLUMNS = [
+  {
+    title: '序号',
+    dataIndex: 'uid',
+    width: 80,
+  },
+  {
+    title: '内容稿件标题',
+    dataIndex: 'title',
+  },
+  {
+    title: '上传时间',
+    dataIndex: 'created_at',
+    width: 120,
+  },
+  {
+    title: '上传人员',
+    dataIndex: 'uploader.name',
+    width: 120,
+  },
+];
+const emit = defineEmits(['update:formQuery']);
+
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+  useTableSelectionWithPagination({
+    onSelectChange: () => {
+      updateFormQuery();
+    },
+  });
+
+const query = ref({
+  uid: '',
+  uploader_id: '',
+  title: '',
+});
+const uploaders = ref([]);
+const allData = ref([]);
+
+const updateFormQuery = () => {
+  emit('update:formQuery', {
+    ...props.formQuery,
+    work_ids: selectedRowKeys.value,
+  });
+};
+const handleSearch = () => {
+  const { uid, title, uploader_id } = query.value;
+  dataSource.value = allData.value.filter((item) => {
+    const uinMatch = uid === '' ? true : item.uid.includes(uid);
+    const titleMatch = title === '' ? true : item.title === title;
+    const operatorIdMatch = uploader_id === '' ? true : item.uploader?.id === uploader_id;
+    return uinMatch && titleMatch && operatorIdMatch;
+  });
+};
+
+const getUsers = async () => {
+  const { code, data } = await getUserList();
+  if (code === 200) {
+    uploaders.value = data.map( v => ({
+      ...v,
+      name: v.name || v.mobile
+    }));
+
+    console.log(uploaders.value);
+  }
+};
+const getTableData = async () => {
+  const { code, data } = await getWorksList();
+  if (code === 200) {
+    allData.value = data ?? [];
+    dataSource.value = data ?? [];
+    initSelect();
+  }
+};
+const initSelect = () => {
+  if (props.formQuery.work_ids?.length) {
+    selectedRowKeys.value = props.formQuery.work_ids;
+    selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
+  }
+};
+
+const onClearSelect = () => {
+  selectedRowKeys.value = [];
+  selectedRows.value = [];
+  updateFormQuery();
+};
+
+const onDelete = (item) => {
+  const { id } = item;
+  selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
+  selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
+  updateFormQuery();
+};
+
+onMounted(() => {
+  getUsers();
+  getTableData();
+});
+</script>
+
+<style lang="scss" scoped>
+.table-wrap {
+  .s1 {
+    color: var(--Text-2, #3c4043);
+    font-family: font-family-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  .left {
+    border-right: 1px solid var(--Border-2, #e6e6e8);
+    :deep(.arco-table) {
+    }
+  }
+  .right {
+    .tag-item {
+      max-width: 100%;
+      width: fit-content;
+      overflow: hidden;
+      display: flex;
+      height: 24px;
+      padding: 0px 8px;
+      align-items: center;
+      border-radius: 2px;
+      background: var(--BG-200, #f2f3f5);
+      .name {
+        color: var(--Text-2, #3c4043);
+        font-family: font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+        flex: 1;
+        @include ellipsis;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
new file mode 100644
index 0000000..caa90e0
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepOne.vue
@@ -0,0 +1,54 @@
+<template>
+  <a-form ref="formRef" :model="formQuery" :rules="rules" layout="horizontal" auto-label-width class="h-448px">
+    <a-form-item label="项目名称" required field="name">
+      <a-input v-model="formQuery.name" placeholder="请输入项目名称" size="large" class="!w-400px" />
+    </a-form-item>
+    <a-form-item label="项目预算" field="budget">
+      <a-input v-model="formQuery.budget" placeholder="请输入项目预算" size="large" class="!w-400px" />
+    </a-form-item>
+    <a-form-item label="项目目标" field="target">
+      <a-textarea
+        v-model="formQuery.target"
+        placeholder="请输入项目目标"
+        :max-length="500"
+        show-word-limit
+        class="h-154px"
+      />
+    </a-form-item>
+    <a-form-item label="项目背景" field="background">
+      <a-textarea
+        v-model="formQuery.background"
+        placeholder="请输入项目背景"
+        :max-length="500"
+        show-word-limit
+        class="h-154px"
+      />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup>
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const formRef = ref(null);
+
+const rules = {
+  name: [{ required: true, message: '请输入项目名称' }],
+};
+
+const validate = async () => {
+  const errors = await formRef.value.validate();
+ return !errors
+};
+
+const reset = () => {
+  formRef.value.resetFields();
+};
+
+defineExpose({ validate, reset });
+</script>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
new file mode 100644
index 0000000..37b86e5
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepThree.vue
@@ -0,0 +1,259 @@
+<template>
+  <div class="table-wrap flex h-448px">
+    <div class="left flex-1 pr-12px flex flex-col">
+      <div class="flex items-center mb-16px">
+        <a-input
+          v-model="query.name"
+          class="w-220px mr-16px"
+          placeholder="搜索账户"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+        <a-select
+          v-model="query.platform"
+          class="mr-16px w-160px"
+          size="medium"
+          placeholder="选择平台"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option
+            v-for="(item, index) in PLATFORM_LIST"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+            >{{ item.label }}</a-option
+          >
+        </a-select>
+        <a-select
+          v-model="query.operator_id"
+          size="medium"
+          placeholder="选择运营人员"
+          class="w-160px"
+          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>
+      </div>
+      <a-table
+        ref="tableRef"
+        :data="dataSource"
+        column-resizable
+        row-key="id"
+        :row-selection="rowSelection"
+        :pagination="false"
+        :scroll="{ x: '100%', y: '100%' }"
+        class="flex-1 overflow-hidden"
+        :selected-keys="selectedRowKeys"
+        bordered
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+      >
+        <template #empty>
+          <NoData text="暂无账户"/>
+        </template>
+        <template #columns>
+          <a-table-column
+            v-for="column in TABLE_COLUMNS"
+            :key="column.dataIndex"
+            :data-index="column.dataIndex"
+            :fixed="column.fixed"
+            :width="column.width"
+            :min-width="column.minWidth"
+            :sortable="column.sortable"
+            :align="column.align"
+            ellipsis
+            tooltip
+          >
+            <template #title>
+              <div class="flex items-center">
+                <span class="cts mr-4px">{{ column.title }}</span>
+                <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                  <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+                </a-tooltip>
+              </div>
+            </template>
+
+            <template #cell="{ record }">
+              <template v-if="column.dataIndex === 'platform'">
+                <img :src="getPutAccountPlatformLogo(record.platform)" width="19" height="19" />
+              </template>
+              <template v-else>
+                {{ formatTableField(column, record, true) }}
+              </template>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </div>
+    <div class="right w-320px px-12px flex flex-col">
+      <div class="flex justify-between">
+        <p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
+        <a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
+      </div>
+      <div class="flex-1 overflow-y-auto overflow-x-hidden">
+        <template v-if="selectedRows?.length">
+          <div class="tag-item mb-8px" v-for="item in selectedRows" :key="item.id">
+            <a-tooltip :content="item.name">
+              <p class="name mr-4px">{{ item.name || '-' }}</p>
+            </a-tooltip>
+            <icon-close size="12" class="color-#3C4043 cursor-pointer flex-shrink-0" @click="onDelete(item)" />
+          </div>
+        </template>
+        <NoData v-else text="暂无账户" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { PLATFORM_LIST, getPutAccountPlatformLogo } from '@/utils/platform';
+import { formatTableField } from '@/utils/tools';
+
+import { getPlacementAccountOperators, getPlacementAccountsList } from '@/api/all/propertyMarketing';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+const TABLE_COLUMNS = [
+  {
+    title: '账号名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '渠道',
+    dataIndex: 'platform',
+    width: 80,
+  },
+  {
+    title: '运营人员',
+    dataIndex: 'operator.name',
+    width: 140,
+  },
+];
+const emit = defineEmits(['update:formQuery']);
+
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+  useTableSelectionWithPagination({
+    onSelectChange: () => {
+      updateFormQuery();
+    },
+  });
+
+const query = ref({
+  name: '',
+  operator_id: '',
+  platform: '',
+});
+const operators = ref([]);
+const allData = ref([]);
+
+const updateFormQuery = () => {
+  emit('update:formQuery', {
+    ...props.formQuery,
+    placement_account_ids: selectedRowKeys.value,
+  });
+};
+const handleSearch = () => {
+  const { name, platform, operator_id } = query.value;
+  dataSource.value = allData.value.filter((item) => {
+    const nameMatch = name === '' ? true : item.name.includes(name);
+    const platformMatch = platform === '' ? true : item.platform === platform;
+    const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
+    return nameMatch && platformMatch && operatorIdMatch;
+  });
+};
+
+const getOperators = async () => {
+  const { code, data } = await getPlacementAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+const getTableData = async () => {
+  const { code, data } = await getPlacementAccountsList();
+  if (code === 200) {
+    allData.value = data ?? [];
+    dataSource.value = data ?? [];
+    initSelect();
+  }
+};
+const initSelect = () => {
+  if (props.formQuery.placement_account_ids?.length) {
+    selectedRowKeys.value = props.formQuery.placement_account_ids;
+    selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
+  }
+};
+
+const onClearSelect = () => {
+  selectedRowKeys.value = [];
+  selectedRows.value = [];
+  updateFormQuery();
+};
+
+const onDelete = (item) => {
+  const { id } = item;
+  selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
+  selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
+  updateFormQuery();
+};
+
+onMounted(() => {
+  getOperators();
+  getTableData();
+});
+</script>
+
+<style lang="scss" scoped>
+.table-wrap {
+  .s1 {
+    color: var(--Text-2, #3c4043);
+    font-family: font-family-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  .left {
+    border-right: 1px solid var(--Border-2, #e6e6e8);
+    :deep(.arco-table) {
+    }
+  }
+  .right {
+    .tag-item {
+      max-width: 100%;
+      width: fit-content;
+      overflow: hidden;
+      display: flex;
+      height: 24px;
+      padding: 0px 8px;
+      align-items: center;
+      border-radius: 2px;
+      background: var(--BG-200, #f2f3f5);
+      .name {
+        color: var(--Text-2, #3c4043);
+        font-family: font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+        flex: 1;
+        @include ellipsis;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
new file mode 100644
index 0000000..cc171e1
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/stepTwo.vue
@@ -0,0 +1,253 @@
+<template>
+  <div class="table-wrap flex h-448px">
+    <div class="left flex-1 pr-12px flex flex-col">
+      <div class="flex items-center mb-16px">
+        <a-input
+          v-model="query.name"
+          class="w-220px mr-16px"
+          placeholder="搜索账号"
+          size="medium"
+          allow-clear
+          @change="handleSearch"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+        <a-select
+          v-model="query.platform"
+          class="mr-16px w-160px"
+          size="medium"
+          placeholder="选择平台"
+          allow-clear
+          @change="handleSearch"
+        >
+          <a-option
+            v-for="(item, index) in MEDIA_ACCOUNT_PLATFORMS"
+            :key="index"
+            :value="item.value"
+            :label="item.label"
+            >{{ item.label }}</a-option
+          >
+        </a-select>
+        <a-select
+          v-model="query.operator_id"
+          size="medium"
+          placeholder="选择运营人员"
+          class="w-160px"
+          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>
+      </div>
+      <a-table
+        ref="tableRef"
+        :data="dataSource"
+        column-resizable
+        row-key="id"
+        :row-selection="rowSelection"
+        :pagination="false"
+        :scroll="{ x: '100%', y: '100%' }"
+        class="flex-1 overflow-hidden"
+        :selected-keys="selectedRowKeys"
+        bordered
+        @select="handleSelect"
+        @select-all="handleSelectAll"
+      >
+        <template #empty>
+          <NoData text="暂无账号"/>
+        </template>
+        <template #columns>
+          <a-table-column
+            v-for="column in TABLE_COLUMNS"
+            :key="column.dataIndex"
+            :data-index="column.dataIndex"
+            :fixed="column.fixed"
+            :width="column.width"
+            :min-width="column.minWidth"
+            :sortable="column.sortable"
+            :align="column.align"
+            ellipsis
+            tooltip
+          >
+            <template #title>
+              <div class="flex items-center">
+                <span class="cts mr-4px">{{ column.title }}</span>
+                <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                  <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+                </a-tooltip>
+              </div>
+            </template>
+
+            <template #cell="{ record }">
+              <template v-if="column.dataIndex === 'platform'">
+                <img :src="getMediaAccountPlatformLogo(record.platform)" width="19" height="19" />
+              </template>
+              <template v-else>
+                {{ formatTableField(column, record, true) }}
+              </template>
+            </template>
+          </a-table-column>
+        </template>
+      </a-table>
+    </div>
+    <div class="right w-320px px-12px flex flex-col">
+      <div class="flex justify-between">
+        <p class="mb-16px s1">{{ `已选择（${selectedRows?.length ?? 0}）` }}</p>
+        <a-button type="text" @click="onClearSelect" v-if="selectedRows.length">清空</a-button>
+      </div>
+      <div class="flex-1 overflow-y-auto">
+        <div class="flex flex-wrap" v-if="selectedRows?.length">
+          <div class="tag-item mr-8px mb-8px" v-for="item in selectedRows" :key="item.id">
+            <span class="name mr-4px">{{ item.name || '-' }}</span>
+            <icon-close size="12" class="color-#3C4043 cursor-pointer" @click="onDelete(item)" />
+          </div>
+        </div>
+        <NoData v-else text="暂无账号" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { MEDIA_ACCOUNT_PLATFORMS, getMediaAccountPlatformLogo } from '@/utils/platform';
+import { formatTableField } from '@/utils/tools';
+
+import { fetchAccountOperators, getMediaAccountList } from '@/api/all/propertyMarketing';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+const TABLE_COLUMNS = [
+  {
+    title: '账号名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '平台',
+    dataIndex: 'platform',
+    width: 80,
+  },
+  {
+    title: '运营人员',
+    dataIndex: 'operator.name',
+    width: 140,
+  },
+];
+const emit = defineEmits(['update:formQuery']);
+
+const props = defineProps({
+  formQuery: {
+    type: Object,
+    default: () => {},
+  },
+});
+
+const { dataSource, selectedRowKeys, selectedRows, rowSelection, handleSelect, handleSelectAll } =
+  useTableSelectionWithPagination({
+    onSelectChange: () => {
+      updateFormQuery();
+    },
+  });
+
+const query = ref({
+  name: '',
+  operator_id: '',
+  platform: '',
+});
+const operators = ref([]);
+const allData = ref([]);
+
+const updateFormQuery = () => {
+  emit('update:formQuery', {
+    ...props.formQuery,
+    media_account_ids: selectedRowKeys.value,
+  });
+};
+const handleSearch = () => {
+  const { name, platform, operator_id } = query.value;
+  dataSource.value = allData.value.filter((item) => {
+    const nameMatch = name === '' ? true : item.name.includes(name);
+    const platformMatch = platform === '' ? true : item.platform === platform;
+    const operatorIdMatch = operator_id === '' ? true : item.operator_id === operator_id;
+    return nameMatch && platformMatch && operatorIdMatch;
+  });
+};
+
+const getOperators = async () => {
+  const { code, data } = await fetchAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+const getTableData = async () => {
+  const { code, data } = await getMediaAccountList();
+  if (code === 200) {
+    allData.value = data ?? [];
+    dataSource.value = data ?? [];
+    initSelect();
+  }
+};
+const initSelect = () => {
+  if (props.formQuery.media_account_ids?.length) {
+    selectedRowKeys.value = props.formQuery.media_account_ids;
+    selectedRows.value = dataSource.value.filter((v) => selectedRowKeys.value.includes(v.id));
+  }
+};
+
+const onClearSelect = () => {
+  selectedRowKeys.value = [];
+  selectedRows.value = [];
+  updateFormQuery();
+};
+
+const onDelete = (item) => {
+  const { id } = item;
+  selectedRowKeys.value = selectedRowKeys.value.filter((v) => v !== id);
+  selectedRows.value = selectedRows.value.filter((v) => v.id !== id);
+  updateFormQuery();
+};
+
+onMounted(() => {
+  getOperators();
+  getTableData();
+});
+</script>
+
+<style lang="scss" scoped>
+.table-wrap {
+  .s1 {
+    color: var(--Text-2, #3c4043);
+    font-family: font-family-regular;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px;
+  }
+  .left {
+    border-right: 1px solid var(--Border-2, #e6e6e8);
+    :deep(.arco-table) {
+    }
+  }
+  .right {
+    .tag-item {
+      width: fit-content;
+      display: flex;
+      height: 24px;
+      padding: 0px 8px;
+      align-items: center;
+      border-radius: 2px;
+      background: var(--BG-200, #f2f3f5);
+      .name {
+        color: var(--Text-2, #3c4043);
+        font-family: font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/property-marketing/project-manage/project-list/components/add-project-modal/style.scss b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/style.scss
new file mode 100644
index 0000000..c6e2143
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/add-project-modal/style.scss
@@ -0,0 +1,3 @@
+.add-project-modal {
+    
+}
\ No newline at end of file
diff --git a/src/views/property-marketing/project-manage/project-list/components/filter-block/index.vue b/src/views/property-marketing/project-manage/project-list/components/filter-block/index.vue
new file mode 100644
index 0000000..d172b84
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/filter-block/index.vue
@@ -0,0 +1,70 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <div class="filter-wrap px-24px pt-12px pb-24px">
+    <div class="filter-row flex">
+      <div class="filter-row-item flex items-center">
+        <span class="label">项目名称</span>
+        <a-space size="medium">
+          <a-input
+            v-model="query.name"
+            class="w-240px"
+            placeholder="请搜索..."
+            size="medium"
+            allow-clear
+            @change="handleSearch"
+          >
+            <template #prefix>
+              <icon-search />
+            </template>
+          </a-input>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
+          <template #icon>
+            <icon-search />
+          </template>
+          <template #default>搜索</template>
+        </a-button>
+        <a-button size="medium" @click="handleReset">
+          <template #icon>
+            <icon-refresh />
+          </template>
+          <template #default>重置</template>
+        </a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineEmits, defineProps } from 'vue';
+
+const props = defineProps({
+  query: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits('onSearch', 'onReset', 'update:query');
+
+const handleSearch = () => {
+  emits('update:query', props.query);
+  nextTick(() => {
+    emits('onSearch');
+  });
+};
+
+const handleReset = () => {
+  emits('onReset');
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/project-manage/project-list/components/filter-block/style.scss b/src/views/property-marketing/project-manage/project-list/components/filter-block/style.scss
new file mode 100644
index 0000000..dd08cb3
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/filter-block/style.scss
@@ -0,0 +1,23 @@
+.filter-wrap {
+  .filter-row {
+    .filter-row-item {
+      &:not(:last-child) {
+        margin-right: 24px;
+      }
+      .label {
+        margin-right: 8px;
+        color: #211f24;
+        font-family: $font-family-regular;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        flex-shrink: 0;
+        line-height: 22px; /* 157.143% */
+      }
+      :deep(.arco-space-item) {
+        width: 100%;
+      }
+    }
+  }
+  
+}
diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/constants.ts b/src/views/property-marketing/project-manage/project-list/components/project-table/constants.ts
new file mode 100644
index 0000000..a23eb25
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/project-table/constants.ts
@@ -0,0 +1,46 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 10:33:06
+ */
+export const TABLE_COLUMNS = [
+  {
+    title: '项目名称',
+    dataIndex: 'name',
+    width: 240,
+    fixed: 'left',
+  },
+  {
+    title: '项目预算',
+    dataIndex: 'budget',
+    width: 180,
+    prefix: "￥"
+  },
+  {
+    title: '关联平台账号',
+    dataIndex: 'media_account_count',
+    width: 180,
+  },
+  {
+    title: '关联渠道账户',
+    dataIndex: 'placement_account_count',
+    width: 180,
+  },
+  {
+    title: '关联内容稿件',
+    dataIndex: 'work_count',
+    width: 180,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'create_at',
+    width: 180,
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 100,
+  },
+];
diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue b/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue
new file mode 100644
index 0000000..a2a7a9a
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/project-table/delete-project-modal.vue
@@ -0,0 +1,63 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-26 17:44:16
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="删除项目"
+    width="480px"
+    modal-class="project-manage-modal"
+    @close="onClose"
+  >
+    <div class="flex items-center">
+      <img :src="icon1" width="20" height="20" class="mr-12px" />
+      <span>确认删除 {{ projectName }} 这个项目吗？</span>  
+    </div>
+    <template #footer>
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteProject } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const update = inject('update');
+
+const visible = ref(false);
+const projectId = ref(null);
+const projectName = ref('');
+
+const isBatch = computed(() => Array.isArray(projectId.value));
+
+function onClose() {
+  visible.value = false;
+  projectId.value = null;
+  projectName.value = '';
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  projectId.value = id;
+  projectName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const { code } = await deleteProject(projectId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    update()
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/index.vue b/src/views/property-marketing/project-manage/project-list/components/project-table/index.vue
new file mode 100644
index 0000000..ec1441f
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/project-table/index.vue
@@ -0,0 +1,88 @@
+<template>
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    column-resizable
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="flex-1 project-table w-100%"
+    bordered
+    @sorter-change="handleSorterChange"
+  >
+    <template #empty>
+      <NoData text="暂无项目"/>
+    </template>
+    <template #columns>
+      <a-table-column
+        v-for="column in TABLE_COLUMNS"
+        :key="column.dataIndex"
+        :data-index="column.dataIndex"
+        :fixed="column.fixed"
+        :width="column.width"
+        :min-width="column.minWidth"
+        :sortable="column.sortable"
+        :align="column.align"
+        ellipsis
+        tooltip
+      >
+        <template #title>
+          <div class="flex items-center">
+            <span class="cts mr-4px">{{ column.title }}</span>
+            <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+              <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+            </a-tooltip>
+          </div>
+        </template>
+
+        <template v-if="column.dataIndex === 'create_at'" #cell="{ record }">
+          {{ exactFormatTime(record.create_at) }}
+        </template>
+        <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
+          <div class="flex items-center">
+            <img class="mr-8px cursor-pointer" :src="icon1" width="14" height="14" @click="onDelete(record)" />
+            <a-button type="outline" size="mini" @click="onEdit(record)">编辑</a-button>
+          </div>
+        </template>
+
+        <template v-else #cell="{ record }">
+          {{ formatTableField(column, record, true) }}
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { formatTableField, exactFormatTime } from '@/utils/tools';
+import { TABLE_COLUMNS } from './constants';
+
+import icon1 from '@/assets/img/media-account/icon-delete.png';
+
+const emits = defineEmits(['edit', 'sorterChange', 'delete']);
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const tableRef = ref(null);
+
+// 处理排序变化
+const handleSorterChange = (column, order) => {
+  emits('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+};
+const onDelete = (item) => {
+  emits('delete', item);
+};
+const onEdit = (item) => {
+  emits('edit', item);
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/project-manage/project-list/components/project-table/style.scss b/src/views/property-marketing/project-manage/project-list/components/project-table/style.scss
new file mode 100644
index 0000000..38fb392
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/components/project-table/style.scss
@@ -0,0 +1,10 @@
+.project-table {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}
diff --git a/src/views/property-marketing/project-manage/project-list/constants.ts b/src/views/property-marketing/project-manage/project-list/constants.ts
new file mode 100644
index 0000000..2e16021
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/constants.ts
@@ -0,0 +1,5 @@
+export const INITIAL_QUERY = {
+  name: '',
+  sort_column: undefined,
+  sort_order: undefined,
+};
diff --git a/src/views/property-marketing/project-manage/project-list/index.vue b/src/views/property-marketing/project-manage/project-list/index.vue
new file mode 100644
index 0000000..404ccd3
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/index.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="project-list-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid mb-16px">
+      <div class="top flex h-64px px-24px py-10px justify-between items-center">
+        <p class="text-18px font-400 lh-26px color-#211F24 title">项目列表</p>
+        <div class="flex items-center">
+          <a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAddProjectModal">
+            <template #icon>
+              <img :src="icon1" width="16" height="16" />
+            </template>
+            <template #default>添加项目</template>
+          </a-button>
+        </div>
+      </div>
+      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
+    </div>
+    <div
+      class="table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px flex-1 flex flex-col"
+    >
+      <ProjectTable
+        :dataSource="dataSource"
+        @sorterChange="handleSorterChange"
+        @delete="handleDelete"
+        @edit="handleEdit"
+      />
+      <div v-if="pageInfo.total > 0" class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.page_size"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+
+    <AddProjectModal ref="addProjectModalRef" />
+    <DeleteProjectModal ref="deleteProjectModalRef" />
+  </div>
+</template>
+
+<script setup>
+import { INITIAL_QUERY } from './constants';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+import { getProjects } from '@/api/all/propertyMarketing';
+
+import FilterBlock from './components/filter-block';
+import ProjectTable from './components/project-table';
+import AddProjectModal from './components/add-project-modal';
+import DeleteProjectModal from './components/project-table/delete-project-modal.vue';
+
+import icon1 from '@/assets/img/media-account/icon-add.png';
+
+const { dataSource, pageInfo, onPageChange, onPageSizeChange, resetPageInfo } = useTableSelectionWithPagination({
+  onPageChange: () => {
+    getData();
+  },
+  onPageSizeChange: () => {
+    getData();
+  },
+});
+
+const addProjectModalRef = ref(null);
+const deleteProjectModalRef = ref(null);
+
+const query = ref(cloneDeep(INITIAL_QUERY));
+
+const getData = async () => {
+  const { page, page_size } = pageInfo.value;
+  const { code, data } = await getProjects({
+    ...query.value,
+    page,
+    page_size,
+  });
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data.total;
+  }
+};
+const handleSearch = () => {
+  reload();
+};
+
+const handleReset = () => {
+  resetPageInfo();
+  query.value = cloneDeep(INITIAL_QUERY);
+  reload();
+};
+
+const reload = () => {
+  pageInfo.value.page = 1;
+  getData();
+};
+
+const handleOpenAddProjectModal = () => {
+  addProjectModalRef.value?.open();
+};
+const handleSorterChange = (column, order) => {
+  query.value.sort_column = column;
+  query.value.sort_order = order;
+  reload();
+};
+
+const handleDelete = (item) => {
+  const { id, name } = item;
+  deleteProjectModalRef.value?.open({ id, name: `“${name}”` });
+};
+const handleEdit = (item) => {
+  addProjectModalRef.value?.open(item.id);
+};
+
+onMounted(() => {
+  getData();
+});
+
+provide('update', getData);
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/project-manage/project-list/style.scss b/src/views/property-marketing/project-manage/project-list/style.scss
new file mode 100644
index 0000000..09ee598
--- /dev/null
+++ b/src/views/property-marketing/project-manage/project-list/style.scss
@@ -0,0 +1,29 @@
+.project-list-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .filter-wrap {
+    .top {
+      .title {
+        font-family: $font-family-medium;
+        font-style: normal;
+      }
+      :deep(.arco-btn) {
+        .arco-btn-icon {
+          line-height: 16px;
+        }
+      }
+    }
+  }
+  .table-wrap {
+    display: flex;
+    flex-direction: column;
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
index b9c9eba..25f30c8 100644
--- a/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/components/echarts-item/index.vue
@@ -9,9 +9,9 @@
         </template>
       </a-popover>
     </template>
+    <NoData v-if="isChartEmpty" text="暂无数据" />
 
-
-    <div  class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
+    <div v-else class="chart" ref="chartEl" :style="{ height: height + 'px' }"></div>
   </a-card>
 </template>
 
@@ -32,7 +32,11 @@ const chartEl = ref(null);
 const chartContainer = ref(null);
 let chartInstance = null;
 
-const isChartEmpty = computed(() => isEmpty(props.chartData?.series_data));
+// 判断 series_data 是否为空或 undefined/null
+const isChartEmpty = computed(() => {
+  const seriesData = props.chartData?.series_data;
+  return Array.isArray(seriesData) ? seriesData.length === 0 : !seriesData;
+});
 
 console.log(isChartEmpty, 'isChartEmpty');
 // 初始化图表
diff --git a/src/views/property-marketing/put-account/account-dashboard/index.vue b/src/views/property-marketing/put-account/account-dashboard/index.vue
index b395248..7caeee8 100644
--- a/src/views/property-marketing/put-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/put-account/account-dashboard/index.vue
@@ -32,7 +32,7 @@
           <div class="filter-row-item flex items-center">
             <span class="label">运营人员</span>
             <a-space class="w-160px">
-              <OperatorSelect v-model="query.operator_id" :options="operators" />
+              <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" />
             </a-space>
           </div>
         </div>
@@ -43,13 +43,13 @@
               <a-range-picker v-model="query.data_time" size="medium" allow-clear format="YYYY-MM-DD" class="w-100%" />
             </a-space>
           </div>
-          <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+          <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
             <template #icon>
               <icon-search />
             </template>
             <template #default>搜索</template>
           </a-button>
-          <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+          <a-button size="medium" @click="handleReset">
             <template #icon>
               <icon-refresh />
             </template>
@@ -74,13 +74,13 @@
 </template>
 <script setup lang="ts">
 import EchartsItem from './components/echarts-item/index';
-import { PLATFORM_LIST } from '../common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import {
   getPlacementAccountsTrend,
   getPlacementAccountProjectsTrend,
   fetchAccountOperators,
 } from '@/api/all/propertyMarketing';
-import OperatorSelect from '@/views/property-marketing/media-account/components/operator-select/index.vue';
+import CommonSelect from '@/components/common-select';
 import AccountSelect from '@/views/components/common/AccountSelect.vue';
 import PlanSelect from '@/views/components/common/PlanSelect.vue';
 
@@ -109,6 +109,10 @@ const getAccountsTrends = async () => {
   onLoading.value = false;
 };
 
+const handleTabClick = (value) => {
+  accountType.value = value;
+  handleSearch();
+};
 const mergeChartData = (apiResponse) => {
   console.log(apiResponse, 'apiResponse');
   chartConfigs.value = chartConfigs.value.map((config) => {
diff --git a/src/views/property-marketing/put-account/account-dashboard/style.scss b/src/views/property-marketing/put-account/account-dashboard/style.scss
index bd515e5..9e6a32a 100644
--- a/src/views/property-marketing/put-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/put-account/account-dashboard/style.scss
@@ -28,7 +28,7 @@
 
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
 
@@ -92,7 +92,7 @@
         .label {
           margin-right: 8px;
           color: #211f24;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/board-table/constants.ts b/src/views/property-marketing/put-account/account-data/components/board-table/constants.ts
index 4bed58a..5b06da3 100644
--- a/src/views/property-marketing/put-account/account-data/components/board-table/constants.ts
+++ b/src/views/property-marketing/put-account/account-data/components/board-table/constants.ts
@@ -7,7 +7,7 @@ export const TABLE_COLUMNS = [
     title: '账户名称',
     dataIndex: 'name',
     prop: 'name',
-    width: 180,
+    width: 240,
     fixed: 'left',
   },
   {
@@ -19,7 +19,7 @@ export const TABLE_COLUMNS = [
   },
   {
     title: '运营人员',
-    dataIndex: 'operator_ame',
+    dataIndex: 'operator_name',
     prop: 'operator',
     width: 180,
   },
diff --git a/src/views/property-marketing/put-account/account-data/components/board-table/index.vue b/src/views/property-marketing/put-account/account-data/components/board-table/index.vue
index b60414d..3c59006 100644
--- a/src/views/property-marketing/put-account/account-data/components/board-table/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/board-table/index.vue
@@ -16,11 +16,11 @@
     </div>
 
     <div class="flex items-center">
-      <a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
+      <a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
         <template #icon> <icon-download /> </template>
         <template #default>导出数据</template>
       </a-button>
-      <a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
+      <a-button type="outline" size="medium" @click="openCustomColumn">
         <template #icon>
           <img :src="icon1" width="14" height="14" />
         </template>
@@ -106,7 +106,7 @@
           </div>
         </template>
         <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
-          <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
+          <a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
         </template>
 
         <template v-else-if="column.isRateField" #cell="{ record }">
@@ -135,7 +135,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
+import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
 import { formatTableField, exactFormatTime } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
 import { useRouter } from 'vue-router';
diff --git a/src/views/property-marketing/put-account/account-data/components/board-table/style.scss b/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
index 4b056ba..0264b7b 100644
--- a/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/board-table/style.scss
@@ -9,7 +9,7 @@
 .account-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue b/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
index 1e661c1..ae22267 100644
--- a/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
@@ -19,7 +19,7 @@
       <div v-if="!isAccountTab" class="filter-row-item flex items-center">
         <span class="label">计划分组</span>
         <a-space class="w-200px">
-          <group-select v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
+          <CommonSelect v-model="query.group_ids" multiple :options="groups" @change="handleSearch" />
         </a-space>
       </div>
       <div class="filter-row-item flex items-center">
@@ -31,14 +31,14 @@
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
+          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
         </a-space>
       </div>
     </div>
     <div class="filter-row flex">
       <div v-if="!isAccountTab" class="filter-row-item flex items-center">
         <span class="label">关联账户</span>
-        <a-space class="w-160px">
+        <a-space class="w-240px">
           <AccountSelect v-model="query.placement_account_id" :options="placementAccounts" @change="handleSearch" />
         </a-space>
       </div>
@@ -55,13 +55,13 @@
           />
         </a-space>
       </div>
-      <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+      <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
         <template #icon>
           <icon-search />
         </template>
         <template #default>搜索</template>
       </a-button>
-      <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+      <a-button size="medium" @click="handleReset">
         <template #icon>
           <icon-refresh />
         </template>
@@ -78,10 +78,9 @@ import {
   getPlacementAccountsList,
   getPlacementAccountOperators,
 } from '@/api/all/propertyMarketing';
-import GroupSelect from '../group-select';
 
-import OperatorSelect from '@/views/property-marketing/put-account/components/operator-select';
-import StatusSelect from '@/views/property-marketing/put-account/components/status-select';
+import CommonSelect from '@/components/common-select';
+import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
 import AccountSelect from '@/views/property-marketing/put-account/components/account-select';
 
 const props = defineProps({
diff --git a/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
index bf3813c..48e2115 100644
--- a/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
@@ -1,18 +1,4 @@
 .container {
-  :deep(.arco-input-wrapper),
-  :deep(.arco-select-view-single),
-  :deep(.arco-select-view-multiple),
-  :deep(.arco-picker) {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
   .filter-row {
     .filter-row-item {
       &:not(:last-child) {
@@ -21,7 +7,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
index 75f7efd..8f7bc59 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/add-group.vue
@@ -16,7 +16,7 @@
       </a-form-item>
     </a-form>
     <template #footer>
-      <a-button class="cancel-btn" @click="onClose">取消</a-button>
+      <a-button @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px" @click="onSubmit">确认</a-button>
     </template>
   </a-modal>
diff --git a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
index 03312a7..c9f2519 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/delete-group.vue
@@ -9,7 +9,7 @@
       <span>确认删除 "{{ groupName }}" 这个分组吗？</span>
     </div>
     <template #footer>
-      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
         >确认删除</a-button
       >
diff --git a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
index aa0e147..3c19b01 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/group-manage-modal/style.scss
@@ -10,7 +10,7 @@
     }
     .s1 {
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -40,7 +40,7 @@
         .arco-pagination-jumper-prepend {
           color: var(--Text-2, #3c4043);
           text-align: right;
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/components/group-select/index.vue b/src/views/property-marketing/put-account/account-data/components/group-select/index.vue
index a736c92..f8e6556 100644
--- a/src/views/property-marketing/put-account/account-data/components/group-select/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/group-select/index.vue
@@ -9,6 +9,7 @@
     size="medium"
     :placeholder="placeholder"
     allow-clear
+    :max-tag-count="3"
     @change="handleChange"
   >
     <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
diff --git a/src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts b/src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts
index f517a3a..9f592cf 100644
--- a/src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts
+++ b/src/views/property-marketing/put-account/account-data/components/plan-table/constants.ts
@@ -7,7 +7,7 @@ export const TABLE_COLUMNS = [
     title: '计划名称',
     dataIndex: 'name',
     prop: 'name',
-    width: 180,
+    width: 240,
     fixed: 'left',
   },
   {
diff --git a/src/views/property-marketing/put-account/account-data/components/plan-table/index.vue b/src/views/property-marketing/put-account/account-data/components/plan-table/index.vue
index 4ae434e..8450df4 100644
--- a/src/views/property-marketing/put-account/account-data/components/plan-table/index.vue
+++ b/src/views/property-marketing/put-account/account-data/components/plan-table/index.vue
@@ -16,11 +16,11 @@
     </div>
 
     <div class="flex items-center">
-      <a-button class="w-110px search-btn mr-12px" size="medium" @click="handleExport">
+      <a-button type="outline" class="mr-12px" size="medium" @click="handleExport">
         <template #icon> <icon-download /> </template>
         <template #default>导出数据</template>
       </a-button>
-      <a-button class="w-110px search-btn" size="medium" @click="openCustomColumn">
+      <a-button type="outline" size="medium" @click="openCustomColumn">
         <template #icon>
           <img :src="icon1" width="14" height="14" />
         </template>
@@ -106,7 +106,7 @@
           </div>
         </template>
         <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
-          <a-button type="outline" size="small" class="search-btn" @click="handleDetail(record)">详情</a-button>
+          <a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
         </template>
 
         <template v-else-if="column.isRateField" #cell="{ record }">
@@ -133,7 +133,7 @@
 
 <script setup>
 import { ref, computed } from 'vue';
-import { STATUS_LIST } from '@/views/property-marketing/put-account/components/status-select/constants';
+import { STATUS_LIST } from '@/views/property-marketing/media-account/components/status-select/constants';
 import { formatTableField } from '@/utils/tools';
 import { TABLE_COLUMNS } from './constants';
 import { useRouter } from 'vue-router';
diff --git a/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss b/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
index 48c67af..643c16e 100644
--- a/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
+++ b/src/views/property-marketing/put-account/account-data/components/plan-table/style.scss
@@ -9,7 +9,7 @@
 .plan-table {
   .cts {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-data/index.vue b/src/views/property-marketing/put-account/account-data/index.vue
index 842a522..4a9875e 100644
--- a/src/views/property-marketing/put-account/account-data/index.vue
+++ b/src/views/property-marketing/put-account/account-data/index.vue
@@ -9,7 +9,7 @@
         <a-tab-pane key="1" title="账户"></a-tab-pane>
         <a-tab-pane key="2" title="计划"></a-tab-pane>
         <template v-if="!isAccountTab" #extra>
-          <a-button class="w-112px mr-12px search-btn flex items-center" size="medium" @click="handleOpenGroupModal">
+          <a-button type="outline" class="mr-12px flex items-center" size="medium" @click="handleOpenGroupModal">
             <template #icon>
               <img :src="icon2" width="16" height="16" />
             </template>
@@ -68,8 +68,9 @@ import {
   postPlacementAccountDataListExport,
 } from '@/api/all/propertyMarketing';
 
+import { showExportNotification } from '@/utils/arcoD';
 import { INITIAL_QUERY, INITIAL_PAGE_INFO } from './constants';
-import { downloadByUrl } from '@/utils/tools';
+// import { downloadByUrl } from '@/utils/tools';
 
 import icon2 from '@/assets/img/media-account/icon-group.png';
 
@@ -91,7 +92,8 @@ const init = () => {
   selectedRowKeys.value = [];
   accountTableRef.value?.resetTable();
 
-  const data_time = [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')];
+  const yesterday = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
+  const data_time = [yesterday, yesterday];
   query.value.data_time = data_time;
 
   getData();
@@ -136,8 +138,11 @@ const handleSelectionChange = (selectedRows) => {
 };
 
 const handleTabClick = (key) => {
+  dataSource.value = [];
+  selectedRowKeys.value = [];
+  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
   activeTab.value = key;
-  init();
+  getData();
 };
 
 const handleExport = () => {
@@ -147,7 +152,7 @@ const handleExport = () => {
   }).then((res) => {
     const { code, data } = res;
     if (code === 200) {
-      downloadByUrl(data.download_url);
+      showExportNotification(`正在下载“${data.name}”，请稍后...`);
     }
   });
 };
diff --git a/src/views/property-marketing/put-account/account-data/style.scss b/src/views/property-marketing/put-account/account-data/style.scss
index add16aa..9fcc279 100644
--- a/src/views/property-marketing/put-account/account-data/style.scss
+++ b/src/views/property-marketing/put-account/account-data/style.scss
@@ -2,16 +2,6 @@
     height: 100%;
   display: flex;
   flex-direction: column;
-  :deep(.search-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-    color: #6d4cfe;
-  }
-  :deep(.reset-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--BG-500, #b1b2b5);
-    background: var(--BG-white, #fff);
-  }
   .filter-wrap {
     border-radius: 8px;
     border: 1px solid #e6e6e8;
@@ -28,7 +18,7 @@
     }
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue b/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
index 9b0bb2a..08d9c34 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
@@ -2,10 +2,6 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-26 17:44:16
 -->
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-26 17:23:52
--->
 <template>
   <a-modal
     v-model:visible="visible"
@@ -19,7 +15,7 @@
       <span>确认删除 {{ accountName }} 这个账户吗？</span>
     </div>
     <template #footer>
-      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
         >确认删除</a-button
       >
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
index bf4179d..d8cd4cc 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/index.vue
@@ -19,22 +19,52 @@
           <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" />
         </div>
         <div class="field-row">
           <span class="label">账号ID</span>
-          <span class="cts">{{ item.account_id || '-' }}</span>
+          <span class="cts num">{{ item.account_id || '-' }}</span>
         </div>
         <div class="field-row">
           <span class="label">手机号码</span>
-          <span class="cts">{{ item.mobile }}</span>
+          <span class="cts num">{{ item.mobile }}</span>
         </div>
         <div class="field-row">
           <span class="label">运营人员</span>
           <span class="cts">{{ item.operator?.name }}</span>
         </div>
+        <div class="field-row">
+          <span class="label">所属项目</span>
+          <span v-if="!item.projects.length" class="cts">-</span>
+          <div v-else class="flex items-center">
+            <a-tooltip
+              v-if="item.projects.length > 2"
+              position="bottom"
+              :content="
+                item.projects
+                  .slice(2)
+                  .map((v) => v.name)
+                  .join(',')
+              "
+            >
+              <div class="tag-box">
+                <span class="text">{{ `+${item.projects.length - 2}` }}</span>
+              </div>
+            </a-tooltip>
+
+            <div v-for="(project, index) in item.projects.slice(0, 2)" :key="index" class="tag-box">
+              <span class="text">{{ project.name }}</span>
+            </div>
+          </div>
+        </div>
         <div class="field-row">
           <span class="label">账户总消耗</span>
           <span class="cts">{{ `￥${formatNumberShow({ value: item.total_use_amount, showExactValue: true })}` }}</span>
@@ -47,33 +77,34 @@
           <img :src="icon1" 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"
+            type="outline"
+            class="mr-8px"
             size="mini"
             @click="handlePause(item)"
           >
             <template #default>暂停同步</template>
           </a-button>
-          <a-button class="w-64px search-btn mr-8px" size="mini" @click="handleReauthorize(item)">
+          <a-button type="outline" class="mr-8px" size="mini" @click="handleReauthorize(item)">
             <template #default>获取凭证</template>
           </a-button>
 
-          <a-button class="w-40px search-btn" size="mini" @click="openEdit(item)">
+          <a-button type="outline" size="mini" @click="openEdit(item)">
             <template #default>编辑</template>
           </a-button>
         </div>
       </div>
     </div>
-    <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @update="emits('update')" />
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
+    <PauseAccountPatchModal ref="pauseAccountPatchModalRef" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
   </div>
 </template>
 
 <script setup>
 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 { PLATFORM_LIST } from '@/utils/platform';
+import { EnumStatus } from '@/views/property-marketing/media-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';
@@ -92,7 +123,7 @@ const props = defineProps({
   },
 });
 
-const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
+const emits = defineEmits(['openEdit', 'selectionChange', 'delete']);
 
 const pauseAccountPatchModalRef = ref(null);
 const authorizedAccountModalRef = ref(null);
@@ -121,7 +152,7 @@ const openDelete = (item) => {
 };
 
 const handleReauthorize = (item) => {
-  authorizedAccountModalRef.value?.open(item.id, item.last_synced_at);
+  authorizedAccountModalRef.value?.open({ accountId: item.id, last_synced_at: item.last_synced_at });
 };
 
 const handlePause = (item) => {
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue b/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
index 9649f20..671542f 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
@@ -9,7 +9,7 @@
       <span>确认暂停同步 “{{ accountName }}” 这个账号的数据吗？</span>
     </div>
     <template #footer>
-      <a-button class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button size="large" @click="onClose">取消</a-button>
       <a-button type="primary" class="ml-16px !bg-#f64b31" size="large" @click="onConfirm">确定</a-button>
     </template>
   </a-modal>
@@ -20,8 +20,8 @@ import { ref } from 'vue';
 import { pausePatchPlacementAccount } from '@/api/all/propertyMarketing';
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 
-const emits = defineEmits(['update', 'close']);
-
+const emits = defineEmits(['close']);
+const update = inject('update');
 const visible = ref(false);
 const accountId = ref(null);
 const accountName = ref('');
@@ -45,7 +45,7 @@ async function onConfirm() {
   const { code } = await pausePatchPlacementAccount(accountId.value);
   if (code === 200) {
     AMessage.success('暂停成功');
-    emits('update');
+    update();
     onClose();
   }
 }
diff --git a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
index 69a4a09..3ddc4d9 100644
--- a/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/style.scss
@@ -1,9 +1,3 @@
-@mixin ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .card-container {
   flex: 1;
   display: grid;
@@ -19,7 +13,7 @@
     align-items: flex-start;
     .name {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -30,7 +24,7 @@
       margin-right: 20px;
       flex-shrink: 0;
       color: var(--Text-3, #737478);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 12px;
       font-style: normal;
       font-weight: 400;
@@ -44,11 +38,14 @@
       .cts {
         @include ellipsis;
         color: var(--Text-2, #3c4043);
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 12px;
         font-style: normal;
         font-weight: 400;
         line-height: 20px; /* 166.667% */
+        &.num {
+          font-family: $font-family-manrope-regular;
+        }
       }
       .tag-box {
         display: flex;
@@ -61,7 +58,7 @@
         .text {
           @include ellipsis();
           color: var(--Text-2, #3c4043);
-          font-family: 'PuHuiTi-Medium';
+          font-family: $font-family-medium;
           font-size: 10px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
index 021d701..7f0aa6e 100644
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
@@ -111,6 +111,9 @@
             </a-radio>
           </a-radio-group>
         </a-form-item>
+        <a-form-item label="所属项目" field="project_ids">
+          <CommonSelect v-model="form.project_ids" :options="projects" placeholder="请选择…" size="large" />
+        </a-form-item>
         <template v-if="isEdit">
           <a-form-item label="账户总消耗" field="total_use_amount">
             <a-input v-model="form.total_use_amount" placeholder="请输入..." size="large" disabled />
@@ -126,18 +129,18 @@
               <icon-question-circle size="14" class="ml-4px color-#737478" />
             </a-tooltip>
           </template>
-          <a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :un-checked-value="0" />
+          <a-switch v-model="form.is_sync_project" size="medium" :checked-value="1" :unchecked-value="0" />
         </a-form-item>
       </template>
     </a-form>
     <template #footer>
-      <a-button size="large" class="cancel-btn" @click="onClose">取消</a-button>
-      <a-button type="primary" size="large" @click="onSubmit">
+      <a-button size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" size="large" @click="onSubmit" :loading="importLoading">
         {{ confirmBtnText }}
       </a-button>
     </template>
 
-    <AuthorizedAccountModal ref="authorizedAccountModalRef" @update="emits('update')" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
     <!-- <ImportPromptModal ref="importPromptModalRef" /> -->
   </a-modal>
 </template>
@@ -148,20 +151,26 @@ 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 '@/views/property-marketing/put-account/common_constants';
+import CommonSelect from '@/components/common-select';
 
+import { PLATFORM_LIST, ENUM_PUT_ACCOUNT_PLATFORM } from '@/utils/platform';
+
+import { showExportNotification } from '@/utils/arcoD';
+import { genRandomId } from '@/utils/tools';
 import {
   postPlacementAccounts,
   getPlacementAccountsDetail,
   putPlacementAccounts,
   getPlacementAccountsTemplateUrl,
   batchPlacementAccounts,
+  getProjectList,
 } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-download.png';
 import icon2 from '@/assets/img/media-account/icon-delete.png';
 
-const emits = defineEmits(['update']);
+const update = inject('update');
+const emits = defineEmits(['startQueryTaskStatus']);
 
 const UploadStatus = {
   DEFAULT: 'default',
@@ -173,7 +182,8 @@ const INITIAL_FORM = {
   operator_name: '',
   holder_name: '',
   platform: 0,
-  is_sync_project: 0,
+  is_sync_project: 1,
+  project_ids: [],
 };
 
 const visible = ref(false);
@@ -188,6 +198,8 @@ const authorizedAccountModalRef = ref(null);
 const uploadRef = ref(null);
 const file = ref(null);
 const form = ref(cloneDeep(INITIAL_FORM));
+const projects = ref([]);
+const importLoading = ref(false);
 
 const rules = {
   mobile: [
@@ -213,7 +225,7 @@ const rules = {
 
 const isBatchImport = computed(() => uploadType.value === 'batch');
 const confirmBtnText = computed(() => {
-  if (isBatchImport.value) return '确定导入';
+  if (isBatchImport.value) return importLoading.value ? '导入中' : '确定导入';
   return isEdit.value ? '确定' : '下一步';
 });
 
@@ -229,6 +241,7 @@ const handleUpload = async (option) => {
 function removeFile() {
   fileName.value = '';
   file.value = null;
+  importLoading.value = false;
   uploadStatus.value = UploadStatus.DEFAULT;
 }
 
@@ -240,6 +253,8 @@ const reset = () => {
   fileName.value = '';
   file.value = null;
   isEdit.value = false;
+  projects.value = [];
+  importLoading.value = false;
   uploadStatus.value = UploadStatus.DEFAULT;
   uploadType.value = 'manual';
 };
@@ -252,12 +267,19 @@ const open = (accountId = '') => {
   id.value = accountId;
   isEdit.value = !!accountId;
 
+  getProjects();
   if (accountId) {
     getAccountDetail();
   }
 
   visible.value = true;
 };
+const getProjects = async () => {
+  const { code, data } = await getProjectList();
+  if (code === 200) {
+    projects.value = data;
+  }
+};
 
 const getAccountDetail = async () => {
   const { code, data } = await getPlacementAccountsDetail(id.value);
@@ -268,28 +290,59 @@ const getAccountDetail = async () => {
 
 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 batchPlacementAccounts(formData, {
+    const { code, data } = await batchPlacementAccounts(formData, {
       headers: {
         'Content-Type': 'multipart/form-data',
       },
     });
+
     if (code === 200) {
-      AMessage.success('导入成功');
-      emits('update');
+      const id = genRandomId();
+      showExportNotification(`正在导入“${file.value.name}”，请稍后...`, { id });
+      emit('startQueryTaskStatus', data.id, id);
       onClose();
     } else {
       uploadStatus.value = UploadStatus.ERROR;
     }
   } catch (error) {
     uploadStatus.value = UploadStatus.ERROR;
+  } finally {
+    importLoading.value = false;
   }
 
   // importPromptModalRef.value.open();
 };
 
+const handleAdd = async () => {
+  // 聚光无子账号
+  if (form.value.platform === ENUM_PUT_ACCOUNT_PLATFORM.jg) {
+    const { code, data } = await postPlacementAccounts(form.value);
+    if (code === 200) {
+      update();
+      authorizedAccountModalRef.value.open({ accountId: data?.id });
+    }
+  } else {
+    authorizedAccountModalRef.value.open({ form: form.value, needSelectSubAccount: true });
+  }
+};
+const handleEdit = async () => {
+  const { code } = await putPlacementAccounts({ id: id.value, ...form.value });
+  if (code === 200) {
+    isEdit.value && AMessage.success('修改成功');
+    update();
+    onClose();
+  }
+};
+
 async function onSubmit() {
   if (isBatchImport.value) {
     handleBatchImport();
@@ -298,27 +351,11 @@ async function onSubmit() {
 
   formRef.value.validate(async (errors) => {
     if (!errors) {
-      const _fn = id.value ? putPlacementAccounts : postPlacementAccounts;
-      const _params = id.value ? { id: id.value, ...form.value } : form.value;
-      const { code, data } = await _fn(_params);
-      if (code === 200) {
-        isEdit.value && AMessage.success('修改成功');
-        emits('update');
-
-        if (isEdit.value) {
-          onClose();
-        } else {
-          handleSuccess(data?.id);
-        }
-      }
+      isEdit.value ? handleEdit() : handleAdd();
     }
   });
 }
 
-const handleSuccess = (id) => {
-  authorizedAccountModalRef.value.open(id);
-};
-
 const handleDownloadTemplate = async () => {
   const { code, data } = await getPlacementAccountsTemplateUrl();
   if (code === 200) {
@@ -326,6 +363,7 @@ const handleDownloadTemplate = async () => {
   }
 };
 
+provide('closeAddAccountModal', onClose);
 // 对外暴露打开弹窗方法
 defineExpose({ open });
 </script>
diff --git a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
index 1304cb2..72132dc 100644
--- a/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
@@ -9,7 +9,7 @@
       width: 100%;
       .dt {
         color: var(--Brand-Brand-6, #6d4cfe);
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -21,7 +21,7 @@
         background: var(--BG-200, #f2f3f5);
         .name {
           color: var(--Text-1, #211f24);
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 14px;
           font-style: normal;
           font-weight: 400;
@@ -69,7 +69,7 @@
         .tip {
           color: var(--Text-3, #737478);
           text-align: center;
-          font-family: 'PuHuiTi-Regular';
+          font-family: $font-family-regular;
           font-size: 12px;
           font-style: normal;
           font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
index 4f5bb36..8ac7abc 100644
--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
@@ -12,7 +12,7 @@
     :footer="!isLoading"
     @close="close"
   >
-    <div v-if="showSyncTip">
+    <!-- <div v-if="showSyncTip">
       <div class="flex items-center mb-20px">
         <img :src="icon1" width="16" height="16" class="mr-16px" />
         <p class="s2">
@@ -25,8 +25,8 @@
         <a-radio value="sync" class="mb-16px">立即同步遗漏数据 - 获取完整的最新数据 （推荐）</a-radio>
         <a-radio value="no_sync">仅授权不更新 - 继续使用当前不完全的数据</a-radio>
       </a-radio-group>
-    </div>
-    <div v-else class="flex flex-col items-center">
+    </div> -->
+    <div class="flex flex-col items-center">
       <template v-if="isLoading">
         <a-progress
           :percent="progress"
@@ -55,10 +55,12 @@
       </template>
     </div>
     <template #footer>
-      <a-button size="large" class="cancel-btn" @click="close">取消</a-button>
+      <a-button size="large" @click="close">取消</a-button>
       <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
     </template>
   </a-modal>
+
+  <SelectSubAccountModal ref="selectSubAccountModalRef" />
 </template>
 
 <script setup>
@@ -71,12 +73,14 @@ import {
   postPlacementAccountsSync,
 } from '@/api/all/propertyMarketing';
 
+import SelectSubAccountModal from '../select-sub-account-modal';
+
 import icon1 from '@/assets/img/media-account/icon-warn-1.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 
-const emits = defineEmits(['update']);
-const INITIAL_SYNC_TYPE = 'sync';
+const update = inject('update');
+// const INITIAL_SYNC_TYPE = 'sync';
 const visible = ref(false);
 const isLoading = ref(false);
 const isCompleted = ref(false);
@@ -86,9 +90,12 @@ const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 
-const lastSyncedAt = ref(null); // 上次同步时间戳
-const showSyncTip = ref(false);
-const syncType = ref(INITIAL_SYNC_TYPE); // sync ｜ no_sync
+const selectSubAccountModalRef = ref(null);
+// const lastSyncedAt = ref(null); // 上次同步时间戳
+// const showSyncTip = ref(false);
+const shouldSelectSubAccount = ref(false);
+// const syncType = ref(INITIAL_SYNC_TYPE); // sync ｜ no_sync
+const addAccountFormData = ref(null); // 添加账户表单数据
 
 const INITIAL_FORM = {
   account: '',
@@ -116,22 +123,26 @@ const confirmBtnText = computed(() => {
   return isSuccess.value ? '继续添加' : '重试';
 });
 
-const getDaysDiffText = (lastSyncedAt) => {
-  if (!lastSyncedAt) return '0天';
+// const getDaysDiffText = (lastSyncedAt) => {
+//   if (!lastSyncedAt) return '0天';
 
-  const daysDiff = dayjs().diff(dayjs(lastSyncedAt * 1000), 'day');
+//   const daysDiff = dayjs().diff(dayjs(lastSyncedAt * 1000), 'day');
 
-  if (daysDiff === 0) return '不到1天';
-  return `${daysDiff}天`;
-};
+//   if (daysDiff === 0) return '不到1天';
+//   return `${daysDiff}天`;
+// };
+
+const open = ({ accountId, last_synced_at = null, form = null, needSelectSubAccount = false }) => {
+  reset();
 
-const open = (accountId, last_synced_at = null) => {
   id.value = accountId;
-  lastSyncedAt.value = last_synced_at;
+  // lastSyncedAt.value = last_synced_at;
+  addAccountFormData.value = form;
+  shouldSelectSubAccount.value = needSelectSubAccount;
   visible.value = true;
 };
 
-const close = () => {
+const reset = () => {
   formRef.value?.resetFields();
   formRef.value?.clearValidate();
 
@@ -142,11 +153,16 @@ const close = () => {
   failReason.value = '';
   progress.value = 0;
   id.value = '';
-  lastSyncedAt.value = null;
-  syncType.value = INITIAL_SYNC_TYPE;
-  showSyncTip.value = false;
+  // lastSyncedAt.value = null;
+  // syncType.value = INITIAL_SYNC_TYPE;
+  // showSyncTip.value = false;
+  shouldSelectSubAccount.value = false;
+  addAccountFormData.value = null;
   clearFakeProgressTimer();
   clearStatusPollingTimer();
+};
+
+const close = () => {
   visible.value = false;
 };
 
@@ -174,6 +190,8 @@ const startStatusPolling = () => {
         clearFakeProgressTimer();
         clearStatusPollingTimer();
         isLoading.value = false;
+
+        isSuccess.value && postPlacementAccountsSync(id.value);
       }
     }
   }, 2000);
@@ -220,49 +238,62 @@ const clearFakeProgressTimer = () => {
   }
 };
 
-const handleSyncData = () => {
-  if (!showSyncTip.value) {
-    formRef.value.validate(async (errors) => {
-      if (!errors) {
-        showSyncTip.value = true;
-      }
-    });
-    return;
-  }
+// const handleSyncData = () => {
+//   if (!showSyncTip.value) {
+//     formRef.value.validate(async (errors) => {
+//       if (!errors) {
+//         showSyncTip.value = true;
+//       }
+//     });
+//     return;
+//   }
 
-  if (syncType.value === INITIAL_SYNC_TYPE) {
-    postPlacementAccountsSync(id.value).then((res) => {
-      if (res.code === 200) {
-        close();
-      }
-    });
-  } else {
-    close();
-  }
-};
+//   if (syncType.value === INITIAL_SYNC_TYPE) {
+//     postPlacementAccountsSync(id.value).then((res) => {
+//       if (res.code === 200) {
+//         update();
+//         close();
+//       }
+//     });
+//   } else {
+//     close();
+//   }
+// };
 
 const handleOk = () => {
-  if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
-    handleSyncData();
-    return;
-  }
+  // // n天未同步更新
+  // if (lastSyncedAt.value && lastSyncedAt.value < dayjs().startOf('day').valueOf()) {
+  //   handleSyncData();
+  //   return;
+  // }
 
+  // 已完成
   if (isCompleted.value) {
     if (isSuccess.value) {
-      emits('update');
+      update();
       close();
     } else {
       startLoading();
     }
-  } else {
-    formRef.value.validate(async (errors) => {
-      if (!errors) {
-        startLoading();
-      }
-    });
+    return;
   }
+
+  // 未完成，校验表单
+  formRef.value.validate(async (errors) => {
+    if (errors) return;
+    if (shouldSelectSubAccount.value) {
+      visible.value = false;
+      selectSubAccountModalRef.value.open({
+        ...addAccountFormData.value,
+        ...form.value,
+      });
+    } else {
+      startLoading();
+    }
+  });
 };
 
+provide('closeAuthorizeAccountModal', close);
 defineExpose({
   open,
 });
diff --git a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
index 269596d..656f26b 100644
--- a/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
@@ -20,7 +20,7 @@
       .s1 {
         color: var(--BG-White, #fff);
         text-align: center;
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
@@ -30,7 +30,7 @@
   }
   .s2 {
     color: var(--Text-1, #211f24);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -40,7 +40,7 @@
     overflow: hidden;
     color: var(--Functional-Red-6, #f64b31);
     text-overflow: ellipsis;
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
index 3b90852..9293455 100644
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/index.vue
@@ -42,18 +42,24 @@
       <div class="filter-row-item flex items-center">
         <span class="label">运营人员</span>
         <a-space class="w-160px">
-          <OperatorSelect v-model="query.operator_id" :options="operators" @change="handleSearch" />
+          <CommonSelect v-model="query.operator_id" :multiple="false" :options="operators" @change="handleSearch" />
         </a-space>
       </div>
     </div>
     <div class="filter-row flex">
-      <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
+      <div class="filter-row-item flex items-center">
+        <span class="label">所属项目</span>
+        <a-space class="w-200px">
+          <CommonSelect v-model="query.project_ids" :options="projects" @change="handleSearch" />
+        </a-space>
+      </div>
+      <a-button type="outline" class="mr-12px" size="medium" @click="handleSearch">
         <template #icon>
           <icon-search />
         </template>
         <template #default>搜索</template>
       </a-button>
-      <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+      <a-button size="medium" @click="handleReset">
         <template #icon>
           <icon-refresh />
         </template>
@@ -65,10 +71,10 @@
 
 <script setup>
 import { defineEmits, defineProps } from 'vue';
-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';
+import { getPlacementAccountOperators, getProjectList } from '@/api/all/propertyMarketing';
+import { PLATFORM_LIST } from '@/utils/platform';
+import StatusSelect from '@/views/property-marketing/media-account/components/status-select';
+import CommonSelect from '@/components/common-select';
 
 const props = defineProps({
   query: {
@@ -80,6 +86,7 @@ const props = defineProps({
 const emits = defineEmits('onSearch', 'onReset', 'update:query');
 
 const operators = ref([]);
+const projects = ref([]);
 
 const handleSearch = () => {
   emits('update:query', props.query);
@@ -97,9 +104,16 @@ const getOperators = async () => {
     operators.value = data;
   }
 };
+const getProjects = async () => {
+  const { code, data } = await getProjectList();
+  if (code === 200) {
+    projects.value = data;
+  }
+};
 
 onMounted(() => {
   getOperators();
+  getProjects();
 });
 </script>
 
diff --git a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
index ff7b556..48e2115 100644
--- a/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/filter-block/style.scss
@@ -1,17 +1,4 @@
 .container {
-  :deep(.arco-input-wrapper),
-  :deep(.arco-select-view-single),
-  :deep(.arco-select-view-multiple) {
-    border-radius: 4px;
-    border-color: #d7d7d9;
-    background-color: #fff;
-    &:focus-within,
-    &.arco-input-focus {
-      background-color: var(--color-bg-2);
-      border-color: rgb(var(--primary-6));
-      box-shadow: 0 0 0 0 var(--color-primary-light-2);
-    }
-  }
   .filter-row {
     .filter-row-item {
       &:not(:last-child) {
@@ -20,7 +7,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
index 5fd6c1e..ac7f68c 100644
--- a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
@@ -18,7 +18,7 @@
       </div>
     </div>
     <template #footer>
-      <a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
+      <a-button size="large" @click="close">取消</a-button>
       <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
     </template>
   </a-modal>
diff --git a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
index aec2422..618362a 100644
--- a/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
@@ -4,7 +4,7 @@
   .arco-modal-body {
     .tip {
       color: var(--Text-1, #211f24);
-      font-family: 'PuHuiTi-Medium';
+      font-family: $font-family-medium;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts
new file mode 100644
index 0000000..52e05fd
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/constants.ts
@@ -0,0 +1,23 @@
+export const INITIAL_FORM = {
+  platform: '',
+  account: '',
+  password: '',
+  account_name: '',
+  account_id: '',
+};
+export const INITIAL_PAGE_INFO = {
+  page: 1,
+  page_size: 20,
+  total: 0,
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '账户名称',
+    dataIndex: 'account_name',
+  },
+  {
+    title: '账户ID',
+    dataIndex: 'account_id',
+  },
+];
diff --git a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
new file mode 100644
index 0000000..d2af440
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/index.vue
@@ -0,0 +1,214 @@
+<template>
+  <a-modal
+    v-model:visible="visible"
+    title="选择子账户"
+    modal-class="select-sub-account-modal"
+    width="720px"
+    :mask-closable="false"
+    @close="onClose"
+  >
+    <div class="filter-row flex mb-16px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">账户名称</span>
+        <a-input
+          v-model="query.account_name"
+          class="w-240px"
+          placeholder="请搜索..."
+          size="medium"
+          allow-clear
+          @change="reload"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">账户ID</span>
+        <a-input
+          v-model="query.account_id"
+          class="w-240px"
+          placeholder="请搜索..."
+          size="medium"
+          allow-clear
+          @change="reload"
+        >
+          <template #prefix>
+            <icon-search />
+          </template>
+        </a-input>
+      </div>
+    </div>
+
+    <a-table
+      ref="tableRef"
+      :data="dataSource"
+      column-resizable
+      :row-selection="rowSelection"
+      :row-key="ROW_KEY"
+      :pagination="false"
+      :scroll="{ x: '100%', y: '100%' }"
+      class="w-100% flex-1 overflow-hidden"
+      :selected-keys="selectedRowKeys"
+      bordered
+      @select="handleSelect"
+      @select-all="handleSelectAll"
+    >
+      <template #empty>
+        <NoData />
+      </template>
+      <template #columns>
+        <a-table-column
+          v-for="column in TABLE_COLUMNS"
+          :key="column.dataIndex"
+          :data-index="column.dataIndex"
+          :fixed="column.fixed"
+          :width="column.width"
+          :min-width="column.minWidth"
+          :sortable="column.sortable"
+          :align="column.align"
+          ellipsis
+          tooltip
+        >
+          <template #title>
+            <div class="flex items-center">
+              <span class="cts mr-4px">{{ column.title }}</span>
+              <a-tooltip v-if="column.tooltip" :content="column.tooltip" position="top">
+                <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+              </a-tooltip>
+            </div>
+          </template>
+
+          <template #cell="{ record }">
+            {{ formatTableField(column, record, true) }}
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+    <div v-if="pageInfo.total > 0" class="flex justify-end mt-16px">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.page_size"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+    <template #footer>
+      <span class="cts color-#3C4043 s1"
+        >已选<span class="color-#6D4CFE num mx-3px">{{ selectedRows.length }}个</span>账户</span
+      >
+      <div class="flex items-center">
+        <a-button size="large" @click="onClose">取消</a-button>
+        <a-button
+          type="primary"
+          class="ml-16px"
+          status="danger"
+          size="large"
+          :disabled="!selectedRows.length"
+          @click="onConfirm"
+          >添加已选账户</a-button
+        >
+      </div>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { INITIAL_FORM, INITIAL_PAGE_INFO, TABLE_COLUMNS } from './constants';
+import { formatTableField } from '@/utils/tools';
+import { postSubAccount, postAddSubAccount } from '@/api/all/propertyMarketing';
+import { useTableSelectionWithPagination } from '@/hooks/useTableSelectionWithPagination';
+
+const emits = defineEmits('confirm');
+const update = inject('update');
+const closeAddAccountModal = inject('closeAddAccountModal');
+const closeAuthorizeAccountModal = inject('closeAuthorizeAccountModal');
+
+const visible = ref(false);
+const query = ref(cloneDeep(INITIAL_FORM));
+const form = ref(null);
+
+const ROW_KEY = 'account_id';
+const {
+  selectedRowKeys,
+  selectedRows,
+  dataSource,
+  pageInfo,
+  onPageChange,
+  onPageSizeChange,
+  rowSelection,
+  handleSelect,
+  handleSelectAll,
+} = useTableSelectionWithPagination({
+  rowKey: ROW_KEY,
+  onPageChange: () => {
+    getData();
+  },
+  onPageSizeChange: () => {
+    getData();
+  },
+});
+
+const open = (formData) => {
+  const { platform, account, password } = formData;
+  form.value = formData;
+  query.value = {
+    ...query.value,
+    platform,
+    account,
+    password,
+  };
+
+  getData();
+  visible.value = true;
+};
+
+const onClose = () => {
+  form.value = null;
+  selectedRows.value = [];
+  dataSource.value = [];
+  selectedRowKeys.value = [];
+  query.value = cloneDeep(INITIAL_FORM);
+  pageInfo.value = cloneDeep(INITIAL_PAGE_INFO);
+  visible.value = false;
+};
+
+const onConfirm = async () => {
+  const { code } = await postAddSubAccount({ ...form.value, subaccounts: selectedRows.value });
+  if (code === 200) {
+    visible.value = false;
+    update();
+    closeAuthorizeAccountModal();
+    closeAddAccountModal();
+  }
+};
+
+const getData = async () => {
+  const { page, page_size } = pageInfo.value;
+  const { code, data } = await postSubAccount({
+    ...query.value,
+    page,
+    page_size,
+  });
+  if (code === 200) {
+    dataSource.value = data?.data ?? [];
+    pageInfo.value.total = data.total;
+  }
+};
+
+const reload = () => {
+  pageInfo.value.page = 1;
+  getData();
+};
+
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss
new file mode 100644
index 0000000..25d027e
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/select-sub-account-modal/style.scss
@@ -0,0 +1,45 @@
+.select-sub-account-modal {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: $font-family-medium;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .arco-modal-header {
+  }
+  .arco-modal-body {
+    height: 536px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    .filter-row {
+      .filter-row-item {
+        &:not(:last-child) {
+          margin-right: 24px;
+        }
+        .label {
+          margin-right: 12px;
+          color: #211f24;
+          font-family: 'PuHuiTi-Regular';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          flex-shrink: 0;
+          line-height: 22px; 
+        }
+      }
+    }
+    
+  }
+  .arco-modal-footer {
+    justify-content: space-between;
+    .s1 {
+      font-family: $font-family-regular;
+      .num {
+        font-family: $font-family-medium;
+      }
+    }
+  }
+}
diff --git a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
index d1b5b4c..df9d526 100644
--- a/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
+++ b/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 '@/views/property-marketing/put-account/components/status-select/constants';
+import { STATUS_LIST, EnumStatus } from '@/views/property-marketing/media-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';
@@ -61,7 +61,7 @@ const isDisabledReauthorize = (status) => {
 
   .text {
     color: var(--BG-700, #737478);
-    font-family: 'PuHuiTi-Medium';
+    font-family: $font-family-medium;
     font-size: 12px;
     font-style: normal;
     font-weight: 400;
diff --git a/src/views/property-marketing/put-account/account-manage/constants.ts b/src/views/property-marketing/put-account/account-manage/constants.ts
index be17120..e6afd6e 100644
--- a/src/views/property-marketing/put-account/account-manage/constants.ts
+++ b/src/views/property-marketing/put-account/account-manage/constants.ts
@@ -8,4 +8,5 @@ export const INITIAL_QUERY = {
   status: '',
   platform: '',
   operator_id: '',
+  project_ids: [],
 };
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..e110d61 100644
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@@ -8,7 +8,7 @@
       <div class="top flex h-64px px-24px py-10px justify-between items-center">
         <p class="text-18px font-400 lh-26px color-#211F24 title">账户管理</p>
         <div class="flex items-center">
-          <a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
+          <a-button type="primary" class="w-112px" size="medium" @click="handleOpenAccountModal">
             <template #icon>
               <img :src="icon1" width="16" height="16" />
             </template>
@@ -53,7 +53,7 @@
       </template>
       <div v-else>
         <a-space v-if="isAbNormalStatus" class="flex items-center">
-          <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
+          <a-button type="primary" status="danger" size="mini" @click="handleOpenAbnormalAccount">
             <template #default>查看异常账号</template>
           </a-button>
         </a-space>
@@ -67,7 +67,6 @@
         @selectionChange="handleSelectionChange"
         @delete="handleDelete"
         @openEdit="handleOpenEdit"
-        @update="getData"
       />
       <NoData v-else />
 
@@ -77,16 +76,17 @@
           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"
+          :page-size="pageInfo.page_size"
           @change="onPageChange"
           @page-size-change="onPageSizeChange"
         />
       </div>
     </div>
 
-    <AddAccountModal ref="addAccountModalRef" @update="getData" />
+    <AddPutAccountModal ref="addAccountModalRef" @startQueryTaskStatus="handleGetImportTaskStatus" />
     <DeleteAccountModal ref="deleteAccountRef" @update="onDeleteSuccess" />
   </div>
 </template>
@@ -96,11 +96,13 @@ import { ref } from 'vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
-import AddAccountModal from './components/add-account-modal';
+import AddPutAccountModal from './components/add-account-modal';
 import DeleteAccountModal from './components/account-table/delete-account';
 
 import { INITIAL_QUERY } from './constants';
 import { getPlacementAccounts, getPlacementAccountsHealth } from '@/api/all/propertyMarketing';
+import { getTaskStatus } from '@/api/all/common';
+import { showImportResultNotification } from '@/utils/arcoD';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 import icon4 from '@/assets/img/media-account/icon-success.png';
@@ -111,10 +113,11 @@ const groupManageModalRef = ref(null);
 const tagsManageModalRef = ref(null);
 const addAccountModalRef = ref(null);
 const deleteAccountRef = ref(null);
+let queryTaskTimer = null;
 
 const pageInfo = ref({
   page: 1,
-  pageSize: 8,
+  page_size: 20,
   total: 0,
 });
 const query = ref(cloneDeep(INITIAL_QUERY));
@@ -122,7 +125,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,27 +138,27 @@ 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,
+    abnormal_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: '数据缺失' },
+    { count: abnormal_number, label: '其他异常' },
   ];
 
   // 过滤出有异常的项并格式化
   const abnormalLabels = abnormalTypes.filter(({ count }) => count > 0).map(({ count, label }) => `${count}个${label}`);
 
-  return `共有 ${abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
-});
-
-onMounted(() => {
-  getData();
+  return `共有 ${total_abnormal_number} 个账号存在授权异常，其中：${abnormalLabels.join('，')}。`;
 });
 
 const getData = () => {
@@ -170,10 +173,10 @@ const getHealthData = async () => {
   }
 };
 const getAccountData = async () => {
-  const { page, pageSize } = pageInfo.value;
+  const { page, page_size } = pageInfo.value;
   const { code, data, total } = await getPlacementAccounts({
     page,
-    page_size: pageSize,
+    page_size,
     ...query.value,
   });
   if (code === 200) {
@@ -186,11 +189,11 @@ const reload = () => {
   getData();
 };
 const handleSearch = () => {
-  getData();
+  reload();
 };
 const handleReset = () => {
   pageInfo.value.page = 1;
-  pageInfo.value.pageSize = 20;
+  pageInfo.value.page_size = 20;
   pageInfo.value.total = 0;
   selectedItems.value = [];
   query.value = cloneDeep(INITIAL_QUERY);
@@ -202,7 +205,7 @@ const onPageChange = (current) => {
   getData();
 };
 const onPageSizeChange = (pageSize) => {
-  pageInfo.value.pageSize = pageSize;
+  pageInfo.value.page_size = pageSize;
   reload();
 };
 
@@ -252,6 +255,39 @@ const handleOpenAbnormalAccount = () => {
   query.value.status = 2;
   reload();
 };
+
+// 查询导入账号任务状态
+const getSyncTaskStatus = async (id, notificationId) => {
+  const { code, data } = await getTaskStatus(id);
+  if (code === 200) {
+    if (data?.status !== 0) {
+      clearQueryTaskTimer();
+      notificationId && Notification.remove(notificationId);
+      showImportResultNotification(data);
+      getData();
+    }
+  }
+};
+const handleGetImportTaskStatus = (id, notificationId) => {
+  clearQueryTaskTimer();
+  getSyncTaskStatus(id, notificationId);
+  queryTaskTimer = setInterval(() => getSyncTaskStatus(id, notificationId), 3000);
+};
+const clearQueryTaskTimer = () => {
+  if (queryTaskTimer) {
+    clearInterval(queryTaskTimer);
+    queryTaskTimer = null;
+  }
+};
+
+onMounted(() => {
+  getData();
+});
+onUnmounted(() => {
+  clearQueryTaskTimer();
+});
+
+provide('update', getData);
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/property-marketing/put-account/account-manage/style.scss b/src/views/property-marketing/put-account/account-manage/style.scss
index 69a66d6..8245f2b 100644
--- a/src/views/property-marketing/put-account/account-manage/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/style.scss
@@ -2,20 +2,10 @@
   height: 100%;
   display: flex;
   flex-direction: column;
-  :deep(.search-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-    color: #6d4cfe;
-  }
-  :deep(.reset-btn) {
-    border-radius: 4px;
-    border: 1px solid var(--BG-500, #b1b2b5);
-    background: var(--BG-white, #fff);
-  }
   .filter-wrap {
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
       :deep(.arco-btn) {
@@ -29,7 +19,7 @@
     border-radius: 2px;
     background: #f0edff;
     .label {
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
@@ -41,20 +31,11 @@
         color: #211f24;
       }
     }
-    .err-btn {
-      background-color: #f64b31 !important;
-      color: var(--BG-white, #fff);
-      font-family: 'PingFang SC';
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 20px; /* 166.667% */
-    }
     .operation-btn {
       padding: 0;
       cursor: pointer;
       color: var(--Brand-Brand-6, #6d4cfe);
-      font-family: 'PuHuiTi-Regular';
+      font-family: $font-family-regular;
       font-size: 14px;
       font-style: normal;
       font-weight: 400;
diff --git a/src/views/property-marketing/put-account/common_constants.ts b/src/views/property-marketing/put-account/common_constants.ts
index 4986d1f..da6ab9f 100644
--- a/src/views/property-marketing/put-account/common_constants.ts
+++ b/src/views/property-marketing/put-account/common_constants.ts
@@ -2,6 +2,12 @@ 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 ENUM_PLATFORM = {
+  jl: 0,
+  jg: 1,
+  bili: 2,
+};
+
 export const PLATFORM_LIST = [
   {
     label: '巨量',
diff --git a/src/views/property-marketing/put-account/components/account-select/index.vue b/src/views/property-marketing/put-account/components/account-select/index.vue
index 2c50673..ebfc7ce 100644
--- a/src/views/property-marketing/put-account/components/account-select/index.vue
+++ b/src/views/property-marketing/put-account/components/account-select/index.vue
@@ -9,11 +9,14 @@
     size="medium"
     :placeholder="placeholder"
     allow-clear
+    allow-search
     @change="handleChange"
   >
-    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
-      {{ item.name }}
-    </a-option>
+    <a-tooltip v-for="(item, index) in options" :key="index" :content="item.name">
+      <a-option :value="item.id" :label="item.name">
+        {{ item.name }}
+      </a-option>
+    </a-tooltip>
   </a-select>
 </template>
 
diff --git a/src/views/property-marketing/put-account/components/operator-select/index.vue b/src/views/property-marketing/put-account/components/operator-select/index.vue
deleted file mode 100644
index 2c50673..0000000
--- a/src/views/property-marketing/put-account/components/operator-select/index.vue
+++ /dev/null
@@ -1,64 +0,0 @@
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-25 14:02:40
--->
-<template>
-  <a-select
-    v-model="selectedOperators"
-    :multiple="multiple"
-    size="medium"
-    :placeholder="placeholder"
-    allow-clear
-    @change="handleChange"
-  >
-    <a-option v-for="(item, index) in options" :key="index" :value="item.id" :label="item.name">
-      {{ item.name }}
-    </a-option>
-  </a-select>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-
-const props = defineProps({
-  modelValue: {
-    type: [Array, String, Number],
-    default: () => [],
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: '全部',
-  },
-  options: {
-    type: Array,
-    default: () => [],
-  },
-});
-
-const emits = defineEmits(['update:modelValue', 'change']);
-
-const selectedOperators = ref(props.multiple ? [] : '');
-
-// 监听外部传入的值变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    selectedOperators.value = newVal;
-  },
-  { immediate: true },
-);
-
-// 监听内部值变化，向外部发送更新
-watch(selectedOperators, (newVal) => {
-  emits('update:modelValue', newVal);
-});
-
-const handleChange = (value) => {
-  selectedOperators.value = value;
-  emits('change', value);
-};
-</script>
diff --git a/src/views/property-marketing/put-account/components/status-select/constants.ts b/src/views/property-marketing/put-account/components/status-select/constants.ts
deleted file mode 100644
index 4713f42..0000000
--- a/src/views/property-marketing/put-account/components/status-select/constants.ts
+++ /dev/null
@@ -1,60 +0,0 @@
-/*
- * @Author: RenXiaoDong
- * @Date: 2025-07-04 11:18:11
- */
-export enum EnumStatus {
-  UNAUTHORIZED = 0,
-  NORMAL = 1,
-  ABNORMAL = 2,
-  PAUSE = 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_MISSING,
-  },
-  {
-    text: '异常-登录状态失效',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_LOGIN,
-    tooltip: '登录状态失效，需重新扫码授权',
-  },
-  {
-    text: '异常-请求过于频繁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_REQUEST,
-    tooltip: '请求过于频繁，需等待24小时后重试',
-  },
-  {
-    text: '异常-账号被冻结/封禁',
-    label: '异常',
-    value: EnumStatus.ABNORMAL_FREEZE,
-    tooltip: '账号被冻结/封禁',
-  },
-];
diff --git a/src/views/property-marketing/put-account/components/status-select/index.vue b/src/views/property-marketing/put-account/components/status-select/index.vue
deleted file mode 100644
index ff8be64..0000000
--- a/src/views/property-marketing/put-account/components/status-select/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<!--
- * @Author: RenXiaoDong
- * @Date: 2025-06-25 14:02:40
--->
-<template>
-  <a-select
-    v-model="selectedStatus"
-    :multiple="multiple"
-    size="medium"
-    :placeholder="placeholder"
-    allow-clear
-    @change="handleChange"
-  >
-    <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">
-      {{ item.text }}
-    </a-option>
-  </a-select>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue';
-import { STATUS_LIST } from './constants';
-
-const props = defineProps({
-  modelValue: {
-    type: [Array, String, Number],
-    default: () => [],
-  },
-  multiple: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: '全部',
-  },
-});
-
-const emits = defineEmits(['update:modelValue', 'change']);
-
-const selectedStatus = ref(props.multiple ? [] : '');
-
-// 监听外部传入的值变化
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    selectedStatus.value = newVal;
-  },
-  { immediate: true },
-);
-// 监听内部值变化，向外部发送更新
-watch(selectedStatus, (newVal) => {
-  emits('update:modelValue', newVal);
-});
-
-const handleChange = (value) => {
-  selectedStatus.value = value;
-  emits('change', value);
-};
-</script>
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue b/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
index e4f1705..09a66a8 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/month-data/index.vue
@@ -13,7 +13,8 @@
         复制
       </span>
     </div>
-    <div class="month-data-div">
+    <NoData v-if="isEmptyData" style="height: 100px" text="暂无数据" />
+    <div v-else class="month-data-div">
       <div style="align-self: stretch">
         <a-space direction="vertical">
           <span v-for="(line, index) in formattedText" :key="index" :class="getCss(line.highlight)">
@@ -46,6 +47,10 @@ const classMap = {
   red: 'month-text-red',
 };
 
+const isEmptyData = computed(() => {
+  return isEmpty(props.overview);
+});
+
 const formattedText = computed(() => {
   console.log(props.overview, 'props.overview');
   const { text, parts } = props.overview;
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue b/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
index 690f61e..9dabe08 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/placement-suggestions/index.vue
@@ -9,8 +9,9 @@
         </template>
       </a-popover>
     </div>
+    <NoData v-if="isEmptyData" style="height: 100px" text="暂无数据" />
 
-    <div>
+    <div v-else>
       <a-row class="grid-demo" :gutter="{ md: 8, lg: 24, xl: 32 }">
         <a-col :span="24">
           <div class="overall-strategy">
@@ -100,6 +101,10 @@ const props = defineProps({
     default: () => [],
   },
 });
+const isEmptyData = computed(() => {
+  return isEmpty(props.optimization);
+});
+
 </script>
 
 <style lang="scss"></style>
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
index 6327cad..4082779 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/guideListHistory.vue
@@ -31,7 +31,7 @@
 </template>
 <script setup lang="ts">
 import { IconDelete } from '@arco-design/web-vue/es/icon';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import { Message } from '@arco-design/web-vue';
 
 const columns = [
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
index 4d99ad0..f09d347 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/listSearchForm.vue
@@ -35,13 +35,13 @@
       </div>
 
       <div class="filter-row-item flex items-center">
-        <a-button class="w-84px search-btn mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
+        <a-button type="outline" class="mr-12px" :disabled="disabled" size="medium" @click="handleSearch">
           <template #icon>
             <icon-search />
           </template>
           <template #default>搜索</template>
         </a-button>
-        <a-button class="w-84px reset-btn" size="medium" @click="handleReset">
+        <a-button size="medium" @click="handleReset">
           <template #icon>
             <icon-refresh />
           </template>
@@ -54,7 +54,7 @@
 
 <script setup lang="ts">
 import { defineEmits, defineProps } from 'vue';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 import AccountSelect from '@/views/components/common/AccountSelect.vue';
 import PlanSelect from '@/views/components/common/PlanSelect.vue';
 
@@ -132,7 +132,7 @@ onMounted(() => {
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
index 2008368..b0a02d3 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/placementGuideList.vue
@@ -92,7 +92,7 @@
   </view>
 </template>
 <script setup lang="ts">
-import { PLATFORM_LIST } from '../../../common_constants';
+import { PLATFORM_LIST } from '@/utils/platform';
 
 const props = defineProps({
   listData: {
diff --git a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
index 927f071..7119031 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/components/table-data/style.scss
@@ -35,7 +35,7 @@
       .label {
         margin-right: 8px;
         color: #211f24;
-        font-family: 'PuHuiTi-Regular';
+        font-family: $font-family-regular;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/put-account/investment-guidelines/detail.vue b/src/views/property-marketing/put-account/investment-guidelines/detail.vue
index 8332793..df47f0d 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/detail.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/detail.vue
@@ -77,7 +77,7 @@ import { reactive, ref } from 'vue';
 
 import MonthData from './components/month-data/index.vue';
 import PlacementSuggestions from './components/placement-suggestions/index.vue';
-import { PLATFORM_LIST } from '@/views/property-marketing/put-account/common_constants.ts';
+import { PLATFORM_LIST } from '@/utils/platform';
 import { getPlacementGuideDetail } from '@/api/all/propertyMarketing';
 import { useRoute } from 'vue-router';
 import { uploadPdf } from '@/views/property-marketing/put-account/investment-guidelines/constants';
diff --git a/src/views/property-marketing/put-account/investment-guidelines/index.vue b/src/views/property-marketing/put-account/investment-guidelines/index.vue
index f130ed9..9b9eb51 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/index.vue
+++ b/src/views/property-marketing/put-account/investment-guidelines/index.vue
@@ -46,6 +46,7 @@
     </div>
     <!--    投放建议-->
     <MonthData v-if="tabData == 'placement_guide'" :overview="aiResult.overview"></MonthData>
+
     <PlacementSuggestions v-if="tabData == 'placement_guide'"  :optimization="aiResult.optimization"></PlacementSuggestions>
 
     <div v-if="tabData == 'placement_guide'" class="ignore-export">
diff --git a/src/views/property-marketing/put-account/investment-guidelines/style.scss b/src/views/property-marketing/put-account/investment-guidelines/style.scss
index 96d7075..5d26e95 100644
--- a/src/views/property-marketing/put-account/investment-guidelines/style.scss
+++ b/src/views/property-marketing/put-account/investment-guidelines/style.scss
@@ -49,7 +49,7 @@
 
     .top {
       .title {
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-style: normal;
       }
 
@@ -108,7 +108,7 @@
       .arco-pagination-jumper-prepend {
         color: var(--Text-2, #3c4043);
         text-align: right;
-        font-family: 'PuHuiTi-Medium';
+        font-family: $font-family-medium;
         font-size: 14px;
         font-style: normal;
         font-weight: 400;
diff --git a/src/views/property-marketing/repository/test/index.vue b/src/views/property-marketing/repository/test/index.vue
index a1edfd8..f8a154f 100644
--- a/src/views/property-marketing/repository/test/index.vue
+++ b/src/views/property-marketing/repository/test/index.vue
@@ -6,6 +6,6 @@
 
 </script>
 
-<style lang="less" scoped>
+<style lang="scss" scoped>
 
 </style>
diff --git a/tsconfig.json b/tsconfig.json
index 448577a..8d7756e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,7 +16,7 @@
     "paths": {
       "@/*": ["src/*"]
     },
-    "types": ["unplugin-icons/types/vue", "unplugin-vue-define-options/macros-global"]
+    "types": ["unplugin-vue-define-options/macros-global"]
   },
 
   "references": [
diff --git a/vite.config.ts b/vite.config.ts
index 8ef4e54..ea48c0a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -20,7 +20,7 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
     css: {
       preprocessorOptions: {
         scss: {
-          // additionalData: `@import "@/styles/vars.css";`,
+          additionalData: `@import "@/styles/lib/variable.scss"; @import "@/styles/mixins/index.scss";`,
         },
       },
     },
@@ -40,7 +40,8 @@ export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
           // 目标地址
-          target: 'http://www.lingji.com/api',
+          target: 'https://lingjiapi.lvfunai.com/api',
+          // target: 'http://192.168.40.22/api',
         },
       },
     },