diff --git a/src/api/all/propertyMarketing.ts b/src/api/all/propertyMarketing.ts
index bae28e9..c4c3ced 100644
--- a/src/api/all/propertyMarketing.ts
+++ b/src/api/all/propertyMarketing.ts
@@ -121,3 +121,23 @@ export const startPatchAccount = (id: string) => {
 export const getAuthorizedImage = (id: string) => {
   return Http.get(`/v1/media-accounts/${id}/authorized-image`);
 };
+
+// 账号看板-数据总览
+export const getAccountBoardOverview = (params = {}) => {
+  return Http.get('/v1/media-account-boards/overview', params);
+};
+
+// 账号看板-分页
+export const getAccountBoardList = (params = {}) => {
+  return Http.get('/v1/media-account-boards', params);
+};
+
+// 账号看板-导出
+export const postAccountBoardExport = (params = {}) => {
+  return Http.post('/v1/media-account-boards/export', params);
+};
+
+// 账号看板-详情
+export const getAccountBoardDetail = (id: string) => {
+  return Http.get(`/v1/media-account-boards/${id}`);
+};
diff --git a/src/assets/img/media-account/icon-custom.png b/src/assets/img/media-account/icon-custom.png
new file mode 100644
index 0000000..2f2fe8a
Binary files /dev/null and b/src/assets/img/media-account/icon-custom.png differ
diff --git a/src/assets/img/media-account/icon1.png b/src/assets/img/media-account/icon1.png
new file mode 100644
index 0000000..9244b7f
Binary files /dev/null and b/src/assets/img/media-account/icon1.png differ
diff --git a/src/assets/img/media-account/icon2.png b/src/assets/img/media-account/icon2.png
new file mode 100644
index 0000000..84c631c
Binary files /dev/null and b/src/assets/img/media-account/icon2.png differ
diff --git a/src/assets/img/media-account/icon3.png b/src/assets/img/media-account/icon3.png
new file mode 100644
index 0000000..792d535
Binary files /dev/null and b/src/assets/img/media-account/icon3.png differ
diff --git a/src/assets/img/media-account/icon4.png b/src/assets/img/media-account/icon4.png
new file mode 100644
index 0000000..164776b
Binary files /dev/null and b/src/assets/img/media-account/icon4.png differ
diff --git a/src/assets/img/media-account/icon5.png b/src/assets/img/media-account/icon5.png
new file mode 100644
index 0000000..52a520f
Binary files /dev/null and b/src/assets/img/media-account/icon5.png differ
diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts
index 1b1073b..8a9035d 100644
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@@ -46,7 +46,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'accountManagement',
+        path: 'manage',
         name: 'MediaAccountAccountManagement',
         meta: {
           locale: '账号管理',
@@ -56,24 +56,26 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         component: () => import('@/views/property-marketing/media-account/account-manage'),
       },
       {
-        path: 'account-dashboard',
+        path: 'dashboard',
         name: 'MediaAccountAccountDashboard',
         meta: {
-          locale: '账号看板',
+          locale: '账号数据看板',
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/repository/test'),
+        component: () => import('@/views/property-marketing/media-account/account-dashboard'),
       },
       {
-        path: 'accountDetails',
+        path: 'detail/:id',
         name: 'MediaAccountAccountDetails',
         meta: {
           locale: '账号详情',
           requiresAuth: true,
           roles: ['*'],
+          hideInMenu: true,
+          activeMenu: 'MediaAccountAccountDashboard',
         },
-        component: () => import('@/views/property-marketing/repository/test'),
+        component: () => import('@/views/property-marketing/media-account/account-detail'),
       },
     ],
   },
@@ -91,7 +93,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'accountManagement',
+        path: 'manage',
         name: 'PutAccountAccountManagement',
         meta: {
           locale: '账号管理',
@@ -101,14 +103,14 @@ const COMPONENTS: AppRouteRecordRaw[] = [
         component: () => import('@/views/property-marketing/put-account/account-manage'),
       },
       {
-        path: 'accountData',
+        path: 'data',
         name: 'PutAccountAccountData',
         meta: {
           locale: '账号数据',
           requiresAuth: true,
           roles: ['*'],
         },
-        component: () => import('@/views/property-marketing/repository/test'),
+        component: () => import('@/views/property-marketing/put-account/account-data'),
       },
       {
         path: 'account-dashboard',
diff --git a/src/styles/components/checkbox.scss b/src/styles/components/checkbox.scss
new file mode 100644
index 0000000..2bc38b0
--- /dev/null
+++ b/src/styles/components/checkbox.scss
@@ -0,0 +1,31 @@
+.arco-checkbox {
+  .arco-checkbox-icon {
+    width: 16px;
+    height: 16px;
+    border-color: #d7d7d9;
+  }
+  &.arco-checkbox-disabled {
+    .arco-checkbox-icon {
+      background-color: #f2f3f5;
+      border-color: #d7d7d9;
+    }
+    &.arco-checkbox-checked {
+      .arco-checkbox-icon {
+        background-color: #A794FE !important;
+      }
+    }
+    &.arco-checkbox-indeterminate {
+      .arco-checkbox-icon {
+        border: none;
+        background-color: #A794FE !important;
+      }
+    }
+  }
+  &.arco-checkbox-checked,
+  &.arco-checkbox-indeterminate {
+    .arco-checkbox-icon  {
+     background-color: #6D4CFE !important; 
+    }
+  }
+
+}
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index 85aca0b..4655cb9 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -1 +1,5 @@
-@import "./input.scss";
\ No newline at end of file
+@import './input.scss';
+@import './table.scss';
+@import './checkbox.scss';
+@import './pagination.scss';
+@import './tabs.scss';
\ No newline at end of file
diff --git a/src/styles/components/pagination.scss b/src/styles/components/pagination.scss
new file mode 100644
index 0000000..d0fa4f8
--- /dev/null
+++ b/src/styles/components/pagination.scss
@@ -0,0 +1,41 @@
+.arco-pagination {
+  .arco-pagination-list {
+    .arco-pagination-item {
+      border-radius: 4px;
+      border: 1px solid var(--BG-300, #e6e6e8);
+      &-ellipsis {
+        border: none;
+      }
+
+      &-active {
+        background-color: transparent;
+        border: 1px solid var(--Brand-Brand-6, #6d4cfe);
+      }
+    }
+  }
+  .arco-pagination-options {
+    .arco-select {
+      background-color: transparent;
+      border-radius: 4px;
+      border: 1px solid var(--BG-300, #e6e6e8);
+    }
+  }
+  .arco-pagination-jumper {
+    &-input {
+      border-radius: 4px;
+      border: 1px solid var(--BG-300, #e6e6e8);
+    }
+    &-prepend {
+      color: var(--Text-2, #3c4043);
+      text-align: right;
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+    .arco-input-wrapper {
+      background-color: transparent;
+    }
+  }
+}
diff --git a/src/styles/components/table.scss b/src/styles/components/table.scss
new file mode 100644
index 0000000..b0b3d7c
--- /dev/null
+++ b/src/styles/components/table.scss
@@ -0,0 +1,41 @@
+.arco-table {
+  @mixin table-cell-text {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .arco-table-container {
+    border: none !important;
+    .arco-table-element {
+      thead {
+        .arco-table-tr {
+          .arco-table-th {
+            border-bottom: 1px solid var(--Border-1, #d7d7d9);
+            background: var(--BG-100, #f7f8fa);
+            .arco-table-cell {
+              padding: 13px 16px;
+              .arco-table-th-title {
+                @include table-cell-text;
+              }
+            }
+          }
+        }
+      }
+      tbody {
+        .arco-table-tr {
+          .arco-table-td {
+            .arco-table-cell {
+              padding: 13px 16px;
+              .arco-table-cell-content {
+                @include table-cell-text;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/styles/components/tabs.scss b/src/styles/components/tabs.scss
new file mode 100644
index 0000000..422d644
--- /dev/null
+++ b/src/styles/components/tabs.scss
@@ -0,0 +1,29 @@
+.arco-tabs {
+  .arco-tabs-nav-tab {
+    &-list {
+      .arco-tabs-tab {
+        .arco-tabs-tab-title {
+          color: var(--Text-2, #3c4043);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 16px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 24px;
+        }
+        &-active {
+          .arco-tabs-tab-title {
+            color: #6d4cfe;
+          }
+        }
+        &:hover {
+          .arco-tabs-tab-title::before {
+            display: none;
+          }
+        }
+      }
+      .arco-tabs-nav-ink {
+        background-color: #6d4cfe;
+      }
+    }
+  }
+}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index c40f6c5..23b5667 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1,3 +1,7 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 14:03:21
+ */
 import './vars.css';
 import './components/index.scss';
 import 'normalize.css';
diff --git a/src/utils/tools.ts b/src/utils/tools.ts
new file mode 100644
index 0000000..256ec57
--- /dev/null
+++ b/src/utils/tools.ts
@@ -0,0 +1,95 @@
+/*
+ * @Author: RenXiaoDong
+ * @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));
+}
+
+export function isNotData(n: number): boolean {
+  if (n === undefined) {
+    return true;
+  }
+  return n === -2147483648;
+}
+
+export function splitNumber(num: number): string | number {
+  if (!num) {
+    return num;
+  }
+  const parts = num.toString().split('.');
+  parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+  return parts.join('.');
+}
+
+export function formatNumberShow(...args: any[]): string | number {
+  const [_args] = args;
+  const { value, len = 2, split = true, showExactValue = false } = typeof _args === 'object' ? _args : { value: _args };
+  const getNumber = (value: number) => {
+    return split ? splitNumber(value) : value;
+  };
+
+  if (isNotData(value)) {
+    return '-';
+  }
+  if (value < 0) {
+    return `-${formatNumberShow({
+      value: -value,
+      len,
+      split,
+      showExactValue,
+    })}`;
+  }
+  if (showExactValue) {
+    return getNumber(toFixed(value, len));
+  }
+  if (value < 10000) {
+    return getNumber(toFixed(value, len));
+  } else if (value < 100000000) {
+    const _n = Math.round((value / 10000) * 100) / 100;
+    return split ? `${splitNumber(_n)}w` : `${toFixed(_n, len)}w`;
+  } else {
+    const _n = Math.round((value / 100000000) * 100) / 100;
+
+    return split ? `${splitNumber(_n)}亿` : `${toFixed(_n, len)}亿`;
+  }
+}
+
+export function formatTableField(fieldItem: any, rowValue: any, showExactValue = false) {
+  // 获取嵌套属性值的函数
+  const getNestedValue = (obj: any, path: string) => {
+    if (!obj || !path) return undefined;
+
+    // 如果路径包含点号，说明是链式取值
+    if (path.includes('.')) {
+      return path.split('.').reduce((current, key) => {
+        return current && current[key] !== undefined ? current[key] : undefined;
+      }, obj);
+    }
+
+    // 普通属性取值
+    return obj[path];
+  };
+
+  const _getValue = (value: any) => {
+    if (isNaN(value)) return value;
+    return formatNumberShow({ value, showExactValue });
+  };
+
+  // 使用链式取值获取数据
+  const rawValue = getNestedValue(rowValue, fieldItem.dataIndex);
+  const value = _getValue(rawValue ?? '-');
+
+  return `${fieldItem.prefix || ''}${value}${fieldItem.suffix || ''}`;
+}
+
+export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm', otherYearFmt = 'YYYY-MM-DD HH:mm') {
+  if (!val) return '-';
+  const year = dayjs(val * 1000).year();
+  const currYear = dayjs().year();
+  const diff = year - currYear;
+  const fmt = diff === 0 ? curYearFmt : otherYearFmt;
+  return dayjs(val * 1000).format(fmt);
+}
diff --git a/src/views/components/dataEngine/keyWord.vue b/src/views/components/dataEngine/keyWord.vue
index 6c54794..112182e 100644
--- a/src/views/components/dataEngine/keyWord.vue
+++ b/src/views/components/dataEngine/keyWord.vue
@@ -20,9 +20,9 @@
         :columns="columns"
         :data="dataList"
         :filter-icon-align-left="alignLeft"
-        @change="handleChange"
         :scroll="true"
         :pagination="false"
+        @change="handleChange"
       >
         <template #heatLevel>
           <a-space>
@@ -85,23 +85,11 @@
           />
         </template>
         <template #tred="{ record }">
-          <a-statistic
-            style="font-size: 14px"
-            v-if="record.trend > 0"
-            :value="record.trend * 100"
-            :value-style="{ color: '#F64B31' }"
-          >
-            <template #prefix>
-              <icon-arrow-rise />
-            </template>
-            <template #suffix>%</template>
-          </a-statistic>
-          <a-statistic
-            v-else
-            style="font-size: 14px"
-            :value="record.trend * 100"
-            :value-style="{ color: '#25C883' }"
-          ></a-statistic>
+          <div class="flex items-center justify-end" :class="record.trend >= 0 ? 'color-#f64b31' : 'color-#25c883'">
+            <icon-arrow-up v-if="record.trend >= 0" size="16" />
+            <icon-arrow-down v-else size="16" />
+            {{ `${record.trend === 0 ? 0 : Math.abs(record.trend * 100)}%` }}
+          </div>
         </template>
       </a-table>
     </a-space>
@@ -126,7 +114,7 @@
         <a-space>
           <a-space style="width: 320px">
             <div id="container" style="height: 180px; width: 180px"></div>
-            <a-space direction="vertical" style="font-size: 14px" v-if="fellingRate.length > 0">
+            <a-space v-if="fellingRate.length > 0" direction="vertical" style="font-size: 14px">
               <a-space>
                 <span style="width: 8px; height: 8px; background-color: #25c883; border-radius: 50%"></span>
                 <span>正面情绪 </span>
@@ -144,9 +132,9 @@
             :data="rowData"
             :span-method="spanMethod"
             :filter-icon-align-left="alignLeft"
-            @change="handleChange"
             :scroll="true"
             :pagination="false"
+            @change="handleChange"
           >
             <template #felling="{ record }">
               <img
@@ -188,9 +176,9 @@
         :columns="columns3"
         :data="keywordList"
         :filter-icon-align-left="alignLeft"
-        @change="handleChange"
         :scroll="true"
         :pagination="false"
+        @change="handleChange"
       >
         <template #rank="{ record }">
           <img v-if="record.rank == 1" :src="topImages[0]" style="width: 25px; height: 17px" />
@@ -254,10 +242,10 @@
         </template>
         <template #tred="{ record }">
           <a-statistic
+            v-if="record.trend > 0"
             style="font-size: 14px"
             :value="record.trend * 100"
             :value-style="{ color: '#F64B31' }"
-            v-if="record.trend > 0"
           >
             <template #prefix>
               <icon-arrow-rise />
@@ -277,7 +265,7 @@
       </a-table>
     </a-space>
     <!-- modal -->
-    <a-modal :visible="visible" @ok="handleOk" @cancel="handleCancel" unmountOnClose>
+    <a-modal :visible="visible" unmountOnClose @ok="handleOk" @cancel="handleCancel">
       <template #title>
         <span style="text-align: left; width: 100%">新兴关键词</span>
       </template>
@@ -594,12 +582,12 @@ const getNewKeywordList = async () => {
 };
 
 const drawChart = () => {
-  var dom = document.getElementById('container');
-  var myChart = echarts.init(dom, null, {
+  let dom = document.getElementById('container');
+  let myChart = echarts.init(dom, null, {
     renderer: 'canvas',
     useDirtyRect: false,
   });
-  var option;
+  let option;
   option = {
     color: ['#25C883', '#F64B31'],
     series: [
diff --git a/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts b/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts
new file mode 100644
index 0000000..48b93fb
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/constants.ts
@@ -0,0 +1,153 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 10:33:06
+ */
+export const TABLE_COLUMNS = [
+  {
+    title: '账号名称',
+    dataIndex: 'name',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '项目分组',
+    dataIndex: 'group.name',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '运营人员',
+    dataIndex: 'operator.name',
+    width: 180,
+  },
+  {
+    title: 'AI评价',
+    dataIndex: 'ai_evaluation',
+    width: 260,
+  },
+  {
+    title: '粉丝量',
+    dataIndex: 'fans_number',
+    width: 180,
+    tooltip: '账号当前粉丝总数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '总赞藏数',
+    dataIndex: 'like_number',
+    width: 180,
+    tooltip: '账号所有内容的点赞和收藏总数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '观看量',
+    dataIndex: 'view_number',
+    width: 180,
+    tooltip: '账号所有内容的总观看次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '观看量环比',
+    dataIndex: 'view_chain',
+    width: 180,
+    tooltip: '相比上一周期的观看量变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '点赞量',
+    dataIndex: 'like_number',
+    width: 180,
+    tooltip: '账号所有内容的总点赞数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '点赞量环比',
+    dataIndex: 'like_chain',
+    width: 180,
+    tooltip: '相比上一周期的点赞量变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '最新内容标题/日期',
+    dataIndex: 'like_chain1',
+    width: 240,
+    tooltip: '最新发布内容的标题和发布日期',
+  },
+  {
+    title: '最新作品观看数',
+    dataIndex: 'latest_view_number',
+    width: 180,
+    tooltip: '最新发布内容的观看次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '最新作品日增长',
+    dataIndex: 'latest_daily_growth',
+    width: 180,
+    tooltip: '最新作品每日观看量的增长情况',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '次新内容标题/日期',
+    dataIndex: 'like_chain4',
+    width: 240,
+  },
+  {
+    title: '次新作品观看数',
+    dataIndex: 'second_latest_view_number',
+    width: 180,
+    tooltip: '倒数第二个发布内容的观看次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '次新作品日增长',
+    dataIndex: 'second_latest_daily_growth',
+    width: 180,
+    tooltip: '倒数第二个作品每日观看量的增长情况',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '操作',
+    dataIndex: 'operation',
+    width: 100,
+    fixed: 'right',
+  },
+];
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
new file mode 100644
index 0000000..00a60a2
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
@@ -0,0 +1,189 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 18:08:04
+-->
+<template>
+  <div class="action-row mb-12px flex justify-between">
+    <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
+      >全选</a-checkbox
+    >
+    <div class="flex items-center">
+      <a-button class="w-110px search-btn 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">
+        <template #icon>
+          <img :src="icon1" width="14" height="14" />
+        </template>
+        <template #default>自定义列</template>
+      </a-button>
+    </div>
+  </div>
+
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    :row-selection="rowSelection"
+    :selected-keys="selectedItems"
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="account-table w-100%"
+    bordered
+    @sorter-change="handleSorterChange"
+    @select="handleSelect"
+    @select-all="handleSelectAll"
+  >
+    <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">
+            <img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
+            <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 === 'platform'" #cell="{ record }">
+          {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
+        </template>
+        <template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
+          <div class="status-tag" :class="`status-tag-${record.status}`">
+            <span class="cts status-tag-text">{{
+              STATUS_LIST.find((item) => item.value === record.status)?.label
+            }}</span>
+          </div>
+        </template>
+        <template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
+          <div class="ai-evaluation-row flex">
+            <img
+              width="16"
+              height="16"
+              :src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
+              class="mr-8px icon"
+            />
+            <div>
+              <p class="cts">{{ record.ai_evaluation?.text }}</p>
+              <p class="cts text-12px lh-20px !color-#939499">
+                {{ `观看: ${record.ai_evaluation?.look_chain}%  点赞: ${record.ai_evaluation?.like_chain}%` }}
+              </p>
+            </div>
+          </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>
+        </template>
+
+        <template v-else-if="['view_chain', 'like_chain'].includes(column.dataIndex)" #cell="{ record }">
+          <div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
+            <icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
+            <icon-arrow-down v-else size="16" />
+            {{ formatTableField(column, record) }}
+          </div>
+        </template>
+        <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
+          <p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
+          <p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
+        </template>
+
+        <template v-else #cell="{ record }">
+          {{ formatTableField(column, record, true) }}
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { STATUS_LIST } from '../../constants';
+import { formatTableField } from '@/utils/tools';
+import { TABLE_COLUMNS } from './constants';
+import { useRouter } from 'vue-router';
+
+import icon1 from '@/assets/img/media-account/icon-custom.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/icon5.png';
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
+
+const router = useRouter();
+
+const selectedItems = ref([]);
+const tableRef = ref(null);
+
+const checkedAll = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
+);
+const indeterminate = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
+);
+
+const rowSelection = computed(() => ({
+  type: 'checkbox',
+  showCheckedAll: true,
+}));
+
+const handleSelectAll = (checked) => {
+  if (checked) {
+    selectedItems.value = props.dataSource.map((item) => item.id);
+  } else {
+    selectedItems.value = [];
+  }
+  emit('selectionChange', checked ? selectedItems.value : []);
+};
+
+const handleDetail = (record) => {
+  router.push(`/media-account/detail/${record.id}`);
+};
+
+// 处理排序变化
+const handleSorterChange = (column, order) => {
+  emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+};
+
+const handleSelect = (selectedRowKeys, selectedRows) => {
+  selectedItems.value = selectedRowKeys;
+  emit('selectionChange', selectedRows);
+};
+
+const handleExport = () => {
+  emit('export');
+};
+
+const resetTable = () => {
+  selectedItems.value = [];
+  tableRef.value?.clearSorters();
+};
+
+defineExpose({
+  resetTable,
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..cfdf11c
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/style.scss
@@ -0,0 +1,63 @@
+.action-row {
+  :deep(.arco-btn) {
+    .arco-btn-icon {
+      line-height: 14px;
+    }
+  }
+}
+
+.account-table {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .status-tag {
+    width: fit-content;
+    display: flex;
+    height: 28px;
+    padding: 0px 8px;
+    align-items: center;
+    border-radius: 2px;
+    background: var(--Functional-Red-1, #ffe9e7);
+
+    .status-tag-text {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+    &-3 {
+      background: #fff7e5;
+      .status-tag-text {
+        color: var(--Functional-yellow-6, #ffae00);
+      }
+    }
+    &-1 {
+      background: var(--Functional-Green-1, #ebf7f2);
+      .status-tag-text {
+        color: var(--Functional-Green-6, #25c883);
+      }
+    }
+    &-0 {
+      background: var(--BG-200, #f2f3f5);
+      .status-tag-text {
+        color: var(--Text-2, #3c4043);
+      }
+    }
+  }
+  .ai-evaluation-row {
+    .icon {
+      position: relative;
+      top: 1px;
+    }
+  }
+  .rate-row {
+    &.up {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+    &.down {
+      color: var(--Functional-Green-6, #25c883);
+    }
+  }
+}
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
new file mode 100644
index 0000000..df72627
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/index.vue
@@ -0,0 +1,129 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <div class="container">
+    <div class="filter-row flex mb-20px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">账号名称</span>
+        <a-space size="medium" class="w-240px">
+          <a-input v-model="query.name" 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">
+        <span class="label">分组</span>
+        <a-space class="w-200px">
+          <group-select 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-180px">
+          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
+              item.text
+            }}</a-option>
+          </a-select>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">运营人员</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
+              item.name
+            }}</a-option>
+          </a-select>
+        </a-space>
+      </div>
+    </div>
+    <div class="filter-row flex">
+      <div class="filter-row-item flex items-center">
+        <span class="label">时间筛选</span>
+        <a-space class="w-240px">
+          <a-select
+            v-model="query.date_range"
+            size="medium"
+            placeholder="全部"
+            class="w-120px"
+            allow-clear
+            @change="handleSearch"
+          >
+            <template #arrow-icon> <icon-calendar size="16" /> </template>
+            <a-option :value="7" label="近7天">近7天</a-option>
+            <a-option :value="14" label="近14天">近14天</a-option>
+            <a-option :value="30" label="近30天">近30天</a-option>
+          </a-select>
+        </a-space>
+      </div>
+      <a-button class="w-84px search-btn 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">
+        <template #icon>
+          <icon-refresh />
+        </template>
+        <template #default>重置</template>
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, defineProps } from 'vue';
+import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
+import GroupSelect from '../group-select/index.vue';
+import { STATUS_LIST } from '@/views/property-marketing/media-account/account-dashboard/constants';
+
+const props = defineProps({
+  query: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits('onSearch', 'onReset', 'update:query');
+
+const tags = ref([]);
+const groups = ref([]);
+const operators = ref([]);
+
+const handleSearch = () => {
+  emits('onSearch', props.query);
+};
+
+const handleReset = () => {
+  emits('onReset');
+};
+
+const getGroups = async () => {
+  const { code, data } = await fetchAccountGroups();
+  if (code === 200) {
+    groups.value = data;
+  }
+};
+const getOperators = async () => {
+  const { code, data } = await fetchAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+
+onMounted(() => {
+  // getGroups();
+  // getOperators();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..3a33894
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-dashboard/components/filter-block/style.scss
@@ -0,0 +1,36 @@
+.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) {
+        margin-right: 24px;
+      }
+      .label {
+        margin-right: 8px;
+        color: #211f24;
+        font-family: 'Alibaba PuHuiTi';
+        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/media-account/account-dashboard/components/group-select/index.vue b/src/views/property-marketing/media-account/account-dashboard/components/group-select/index.vue
new file mode 100644
index 0000000..a736c92
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-dashboard/components/group-select/index.vue
@@ -0,0 +1,64 @@
+<!--
+ * @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/account-dashboard/constants.ts b/src/views/property-marketing/media-account/account-dashboard/constants.ts
new file mode 100644
index 0000000..916b6a0
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-dashboard/constants.ts
@@ -0,0 +1,96 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 17:23:56
+ */
+
+import icon1 from '@/assets/img/media-account/icon1.png';
+import icon2 from '@/assets/img/media-account/icon2.png';
+import icon3 from '@/assets/img/media-account/icon3.png';
+import icon4 from '@/assets/img/media-account/icon4.png';
+
+export const CARD_FIELDS = [
+  {
+    label: '账号总数',
+    prop: 'total_number',
+    icon: icon1,
+  },
+  {
+    label: '总粉丝数',
+    prop: 'total_fans_number',
+    icon: icon2,
+    tooltip: '总粉丝数',
+  },
+  {
+    label: '总赞藏数',
+    prop: 'total_like_number',
+    icon: icon3,
+    tooltip: '总赞藏数',
+  },
+  {
+    label: '近7日观看数',
+    prop: 'in_the_past_seven_days_view_number',
+    icon: icon4,
+    tooltip: '近7日观看数',
+  },
+];
+
+export const INITIAL_QUERY = {
+  name: '',
+  status: '',
+  operator_id: '',
+  group_ids: [],
+  date_range: '',
+  column: '',
+  order: '',
+};
+
+export enum EnumStatus {
+  NORMAL = 1,
+  PAUSE = 3,
+  UNAUTHORIZED = 0,
+  ABNORMAL = 2,
+  ABNORMAL_LOGIN = 4,
+  ABNORMAL_REQUEST = 5,
+  ABNORMAL_FREEZE = 6,
+}
+
+export const STATUS_LIST = [
+  {
+    text: '正常',
+    label: '正常',
+    value: EnumStatus.NORMAL,
+  },
+  {
+    text: '暂停同步',
+    label: '暂停同步',
+    value: EnumStatus.PAUSE,
+  },
+  {
+    text: '未授权',
+    label: '未授权',
+    value: EnumStatus.UNAUTHORIZED,
+  },
+  {
+    text: '异常',
+    label: '异常',
+    value: EnumStatus.ABNORMAL,
+  },
+  {
+    text: '异常-登录状态失效',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_LOGIN,
+    tooltip: '登录状态失效，需重新扫码授权',
+  },
+  {
+    text: '异常-请求过于频繁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_REQUEST,
+    tooltip: '请求过于频繁，需等待24小时后重试',
+  },
+  {
+    text: '异常-账号被冻结/封禁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_FREEZE,
+    tooltip: '账号被冻结/封禁',
+  },
+];
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 d7d4473..74a3731 100644
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@@ -3,9 +3,323 @@
  * @Date: 2025-06-25 10:02:20
 -->
 
-<template></template>
+<template>
+  <div class="account-dashboard-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px pb-20px mb-16px">
+      <div class="top flex h-64px py-10px justify-between items-center mb-19px">
+        <div class="flex items-center">
+          <p class="text-18px font-400 lh-26px color-#211F24 title">数据总览</p>
+          <img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
+        </div>
+      </div>
+      <div class="overview-row flex">
+        <div v-for="item in CARD_FIELDS" :key="item.prop" class="overview-item flex-1">
+          <div class="flex items-center mb-8px">
+            <img :src="item.icon" width="24" height="24" class="mr-8px" />
+            <p class="s2 color-#211F24">{{ item.label }}</p>
+            <a-tooltip v-if="item.tooltip" :content="item.tooltip" position="bottom">
+              <img :src="icon1" width="14" height="14" class="cursor-pointer ml-4px" />
+            </a-tooltip>
+          </div>
+          <span class="s1 color-#211F24 ml-32px">{{
+            item.prop === 'total_like_number'
+              ? formatNumberShow(overviewData.total_like_number + overviewData.total_collect_number)
+              : formatNumberShow(overviewData[item.prop])
+          }}</span>
+        </div>
+      </div>
+    </div>
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px py-24px mb-16px">
+      <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"
+    >
+      <AccountTable
+        ref="accountTableRef"
+        :dataSource="dataSource"
+        @selectionChange="handleSelectionChange"
+        @export="handleExport"
+        @sorterChange="handleSorterChange"
+      />
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
 
-<script lang="ts"></script>
+<script setup>
+import FilterBlock from './components/filter-block';
+import AccountTable from './components/account-table';
+
+import { getAccountBoardOverview, getAccountBoardList, postAccountBoardExport } from '@/api/all/propertyMarketing';
+
+import { formatNumberShow } from '@/utils/tools';
+import { INITIAL_QUERY } from './constants';
+
+import { CARD_FIELDS } from './constants';
+import icon1 from '@/assets/img/icon-question.png';
+
+const query = ref(cloneDeep(INITIAL_QUERY));
+const dataSource = ref([]);
+const overviewData = ref({});
+const selectedRowKeys = ref([]);
+const accountTableRef = ref(null);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
+});
+
+// 测试数据
+const mockData = [
+  {
+    id: 1,
+    name: '抖音官方账号',
+    mobile: '13800138001',
+    account_id: 'douyin_001',
+    holder_name: '张三',
+    operator_id: 1,
+    platform: 0,
+    group_id: 1,
+    status: 1,
+    is_pause: 0,
+    fans_number: 1250000,
+    like_number: 890000,
+    collect_number: 45000,
+    view_number: 5600000,
+    view_chain: 12.5,
+    like_chain: 8.3,
+    ai_evaluation: {
+      status: 1,
+      text: '表现优质 | 建议保持',
+      look_chain: 12.5,
+      like_chain: 8.3,
+    },
+    operator: {
+      id: 1,
+      name: '李运营',
+    },
+    group: {
+      id: 1,
+      name: '抖音组',
+    },
+  },
+  {
+    id: 2,
+    name: '小红书美妆号',
+    mobile: '13800138002',
+    account_id: 'xhs_001',
+    holder_name: '李四',
+    operator_id: 2,
+    platform: 1,
+    group_id: 2,
+    status: 1,
+    is_pause: 1,
+    fans_number: 890000,
+    like_number: 670000,
+    collect_number: 89000,
+    view_number: 3200000,
+    view_chain: -5.2,
+    like_chain: 15.7,
+    ai_evaluation: {
+      status: 2,
+      text: '表现中等 | 建议优化',
+      look_chain: -12.5,
+      like_chain: 8.3,
+    },
+    operator: {
+      id: 2,
+      name: '王运营',
+    },
+    group: {
+      id: 2,
+      name: '小红书组',
+    },
+  },
+  {
+    id: 3,
+    name: '抖音美食号',
+    mobile: '13800138003',
+    account_id: 'douyin_002',
+    holder_name: '王五',
+    operator_id: 1,
+    platform: 0,
+    group_id: 1,
+    status: 0,
+    is_pause: 0,
+    fans_number: 0,
+    like_number: 0,
+    collect_number: 0,
+    view_number: 0,
+    view_chain: 0,
+    like_chain: 0,
+    ai_evaluation: {
+      status: 3,
+      text: '表现较差 | 建议整改',
+      look_chain: -12.5,
+      like_chain: -8.3,
+    },
+    operator: {
+      id: 1,
+      name: '李运营',
+    },
+    group: {
+      id: 1,
+      name: '抖音组',
+    },
+  },
+  {
+    id: 4,
+    name: '小红书穿搭号',
+    mobile: '13800138004',
+    account_id: 'xhs_002',
+    holder_name: '赵六',
+    operator_id: 2,
+    platform: 1,
+    group_id: 2,
+    status: 2,
+    is_pause: 0,
+    fans_number: 450000,
+    like_number: 320000,
+    collect_number: 23000,
+    view_number: 1800000,
+    view_chain: -12.8,
+    like_chain: -8.5,
+    operator: {
+      id: 2,
+      name: '王运营',
+    },
+    group: {
+      id: 2,
+      name: '小红书组',
+    },
+  },
+  {
+    id: 5,
+    name: '抖音科技号',
+    mobile: '13800138005',
+    account_id: 'douyin_003',
+    holder_name: '钱七',
+    operator_id: 3,
+    platform: 0,
+    group_id: 3,
+    status: 1,
+    is_pause: 0,
+    fans_number: 2100000,
+    like_number: 1500000,
+    collect_number: 120000,
+    view_number: 8900000,
+    view_chain: 25.6,
+    like_chain: 18.9,
+    operator: {
+      id: 3,
+      name: '陈运营',
+    },
+    group: {
+      id: 3,
+      name: '科技组',
+    },
+  },
+];
+
+const getOverviewData = async () => {
+  // 使用模拟数据
+  overviewData.value = {
+    total_number: 5,
+    total_fans_number: 4690000,
+    total_like_number: 3380000,
+    total_collect_number: 1230000,
+    in_the_past_seven_days_view_number: 19500000,
+  };
+
+  // 如果有真实接口，可以这样调用：
+  // const { code, data } = await getAccountBoardOverview();
+  // if (code === 200) {
+  //   overviewData.value = data;
+  // }
+};
+
+const getData = async () => {
+  // 使用模拟数据
+  dataSource.value = mockData;
+  pageInfo.total = mockData.length;
+
+  // 如果有真实接口，可以这样调用：
+  // const { code, data } = await getAccountBoardList(query.value);
+  // if (code === 200) {
+  //   dataSource.value = data.data;
+  //   pageInfo.total = data.total;
+  // }
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  getData();
+};
+
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  reload();
+};
+
+const handleSearch = () => {
+  getData();
+};
+
+const reload = () => {
+  pageInfo.page = 1;
+  getData();
+};
+
+const handleReset = () => {
+  selectedRowKeys.value = [];
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
+  query.value = cloneDeep(INITIAL_QUERY);
+  accountTableRef.value?.resetTable();
+  reload();
+};
+
+const handleSelectionChange = (selectedRows) => {
+  selectedRowKeys.value = selectedRows;
+  console.log('选中的账号:', selectedRowKeys.value);
+};
+
+const handleExport = () => {
+  postAccountBoardExport({
+    ...query.value,
+  }).then((res) => {
+    const { code, data } = res;
+    if (code === 200) {
+      console.log(data.download_url);
+    }
+  });
+};
+
+const handleSorterChange = (column, order) => {
+  query.value.column = column;
+  query.value.order = order;
+  reload();
+};
+
+onMounted(() => {
+  getOverviewData();
+  getData();
+});
+</script>
 
 <style scoped lang="scss">
 @import './style.scss';
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 e69de29..f56c5bb 100644
--- a/src/views/property-marketing/media-account/account-dashboard/style.scss
+++ b/src/views/property-marketing/media-account/account-dashboard/style.scss
@@ -0,0 +1,52 @@
+.account-dashboard-wrap {
+  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: 'Alibaba PuHuiTi';
+        font-style: normal;
+      }
+      :deep(.arco-btn) {
+        .arco-btn-icon {
+          line-height: 14px;
+        }
+      }
+    }
+    .overview-row {
+      .overview-item {
+        height: 88px;
+        border-radius: 8px;
+        background: var(--BG-100, #f7f8fa);
+        padding: 16px;
+        &:not(:last-child) {
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+
+  .table-wrap {
+    width: 100%;
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+}
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
new file mode 100644
index 0000000..17e3410
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
@@ -0,0 +1,139 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 12:58:25
+-->
+<template>
+  <div class="account-info-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px mb-16px">
+    <div class="title-row">
+      <span class="cts !text-18px !lh-26px">账号信息</span>
+    </div>
+    <div class="account-info-box">
+      <div v-for="(row, rowIdx) in accountInfoFields" :key="rowIdx" class="flex mb-24px">
+        <div
+          v-for="(field, colIdx) in row"
+          :key="colIdx"
+          :class="field.dataIndex === 'ai_evaluation' ? 'flex-2' : 'flex-1'"
+        >
+          <!-- 第二组的AI评价占1/2宽度 -->
+          <template v-if="rowIdx === 1 && colIdx === 0">
+            <div class="flex items-center mb-4px">
+              <img width="16" height="16" :src="icon1" class="mr-4px" />
+              <span class="cts !color-#737478 mr-4px">AI评价</span>
+            </div>
+            <div class="flex items-center">
+              <img
+                width="16"
+                height="16"
+                :src="
+                  detailData.ai_evaluation?.status === 1
+                    ? icon4
+                    : detailData.ai_evaluation?.status === 2
+                    ? icon3
+                    : icon2
+                "
+                class="mr-8px"
+              />
+
+              <span v-if="detailData.ai_evaluation" class="cts">
+                {{ detailData.ai_evaluation?.text }}。观看: +{{ detailData.ai_evaluation.look_chain }}% 点赞: +{{
+                  detailData.ai_evaluation.like_chain
+                }}%
+              </span>
+            </div>
+          </template>
+          <!-- 其他项占1/4宽度 -->
+          <template v-else>
+            <div class="flex items-center mb-4px">
+              <p class="cts !color-#737478 !mr-4px">{{ field.label }}</p>
+              <a-tooltip v-if="field.tooltip" :content="field.tooltip" position="top">
+                <icon-question-circle class="tooltip-icon color-#737478" size="16" />
+              </a-tooltip>
+            </div>
+            <p class="cts">
+              <!-- 状态特殊渲染 -->
+              <template v-if="field.type === 'status'">
+                <span v-if="detailData.status === 1" style="color: #4ad991">正常</span>
+                <span v-else style="color: #ff4d4f">异常</span>
+              </template>
+              <!-- 环比字段特殊渲染 -->
+              <template v-else-if="field.type === 'rate'">
+                <span :style="{ color: detailData[field.dataIndex] > 0 ? 'red' : 'green' }">
+                  <icon-arrow-up v-if="detailData[field.dataIndex] > 0" />
+                  <icon-arrow-down v-else />
+                  {{ detailData[field.dataIndex] }}%
+                </span>
+              </template>
+              <!-- 普通字段，支持多层key -->
+              <template v-else>
+                {{ formatTableField(field, detailData, true) }}
+              </template>
+            </p>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+
+import { formatTableField } from '@/utils/tools';
+import { accountInfoFields } from '../../constants';
+import { getAccountBoardDetail } from '@/api/all/propertyMarketing';
+
+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';
+
+const route = useRoute();
+const id = route.params.id;
+const detailData = ref({
+  id: 1,
+  name: '抖音官方账号',
+  mobile: '13800138001',
+  account_id: 'douyin_001',
+  holder_name: '张三',
+  operator_id: 1,
+  platform: 0,
+  group_id: 1,
+  status: 1,
+  is_pause: 0,
+  fans_number: 1250000,
+  like_number: 890000,
+  collect_number: 45000,
+  view_number: 5600000,
+  view_chain: -12.5,
+  like_chain: 8.3,
+  ai_evaluation: {
+    status: 1,
+    text: '表现优质 | 建议保持',
+    look_chain: 12.5,
+    like_chain: 8.3,
+  },
+  operator: {
+    id: 1,
+    name: '李运营',
+  },
+  group: {
+    id: 1,
+    name: '抖音组',
+  },
+});
+
+const getDetail = async () => {
+  const { code, data } = await getAccountBoardDetail(id);
+  if (code === 200) {
+    detailData.value = data;
+  }
+};
+
+onMounted(() => {
+  getDetail();
+});
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..0c258d6
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
@@ -0,0 +1,3 @@
+.account-info-wrap {
+
+}
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
new file mode 100644
index 0000000..7225e0f
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
@@ -0,0 +1,73 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 13:30:58
+ */
+
+export const INITIAL_QUERY = {
+  name: '',
+  publish_date: [],
+};
+
+export const TABLE_COLUMNS = [
+  {
+    title: '笔记标题',
+    dataIndex: 'name',
+    width: 240,
+  },
+  {
+    title: '发布日期',
+    dataIndex: 'publish_date',
+    width: 160,
+  },
+  {
+    title: '曝光量',
+    dataIndex: 'exposure_number',
+    width: 180,
+    tooltip: '账号所有内容的总曝光次数',
+    align: 'right',
+  },
+  {
+    title: '观看量',
+    dataIndex: 'view_number',
+    width: 180,
+    tooltip: '账号所有内容的总观看次数',
+    align: 'right',
+  },
+  {
+    title: '点赞量',
+    dataIndex: 'like_count',
+    width: 180,
+    tooltip: '账号所有内容的总点赞数',
+    align: 'right',
+  },
+  {
+    title: '收藏量',
+    dataIndex: 'collect_count',
+    width: 180,
+    tooltip: '账号所有内容的总收藏数',
+    align: 'right',
+  },
+  {
+    title: '评论数',
+    dataIndex: 'comment_count',
+    width: 180,
+    tooltip: '账号所有内容的总评论数',
+    align: 'right',
+  },
+  {
+    title: '分享量',
+    dataIndex: 'share_count',
+    width: 180,
+    tooltip: '账号所有内容的总转发数',
+    align: 'right',
+  },
+
+  {
+    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
new file mode 100644
index 0000000..0616e47
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
@@ -0,0 +1,158 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 12:58:09
+-->
+<template>
+  <div class="note-table-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid px-24px flex-1 flex flex-col">
+    <div class="title-row">
+      <div class="flex items-center">
+        <span class="cts !text-18px !lh-26px mr-4px">笔记详情</span>
+        <icon-question-circle size="16" class="color-#737478" />
+      </div>
+    </div>
+    <div class="filter-row flex my-16px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">笔记标题</span>
+        <a-space size="medium" class="w-240px">
+          <a-input v-model="query.name" placeholder="请搜索..." size="medium" allow-clear>
+            <template #prefix>
+              <icon-search />
+            </template>
+          </a-input>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">发布日期</span>
+        <a-space size="medium" class="w-240px">
+          <a-range-picker
+            v-model="query.publish_date"
+            size="medium"
+            allow-clear
+            format="YYYY-MM-DD HH:mm"
+            class="w-100%"
+          />
+        </a-space>
+      </div>
+      <a-button class="w-84px search-btn 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">
+        <template #icon>
+          <icon-refresh />
+        </template>
+        <template #default>重置</template>
+      </a-button>
+    </div>
+    <a-table :data="dataSource" row-key="id" :pagination="false" :scroll="{ x: '100%' }" class="w-100%" bordered>
+      <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">
+              <img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
+              <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 === 'publish_date'">
+              {{ exactFormatTime(record.publish_date) }}
+            </template>
+            <template v-else>
+              {{ formatTableField(column, record, true) }}
+            </template>
+          </template>
+        </a-table-column>
+      </template>
+    </a-table>
+    <div class="pagination-box">
+      <a-pagination
+        :total="pageInfo.total"
+        size="mini"
+        show-total
+        show-jumper
+        show-page-size
+        :current="pageInfo.page"
+        :page-size="pageInfo.pageSize"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TABLE_COLUMNS, INITIAL_QUERY } from './constants';
+import { useRoute } from 'vue-router';
+import { formatTableField, exactFormatTime } from '@/utils/tools';
+
+const route = useRoute();
+const id = route.params.id;
+const dataSource = ref([]);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
+});
+
+const query = ref(cloneDeep(INITIAL_QUERY));
+
+const handleSearch = () => {
+  console.log(query.value);
+};
+
+const handleReset = () => {
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
+  query.value = cloneDeep(INITIAL_QUERY);
+  reload();
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  getData();
+};
+
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  reload();
+};
+
+const reload = () => {
+  pageInfo.page = 1;
+  getData();
+};
+
+const getData = async () => {
+  // const { code, data } = await getAccountBoardList(query.value);
+  // if (code === 200) {
+  //   dataSource.value = data?.list || [];
+  //   pageInfo.total = data.total;
+  // }
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style lang="scss" scoped>
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..e040bfe
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
@@ -0,0 +1,44 @@
+.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) {
+        margin-right: 24px;
+      }
+      .label {
+        margin-right: 8px;
+        color: #211f24;
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        flex-shrink: 0;
+        line-height: 22px; /* 157.143% */
+      }
+      :deep(.arco-space-item) {
+        width: 100%;
+      }
+    }
+  }
+
+  .pagination-box {
+    display: flex;
+    width: 100%;
+    padding: 16px 24px;
+    justify-content: flex-end;
+    align-items: center;
+  }
+}
diff --git a/src/views/property-marketing/media-account/account-detail/constants.ts b/src/views/property-marketing/media-account/account-detail/constants.ts
new file mode 100644
index 0000000..8c60511
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/constants.ts
@@ -0,0 +1,23 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 12:55:44
+ */
+export const accountInfoFields = [
+  [
+    { label: '账号名称', dataIndex: 'name' },
+    { label: '项目分组', dataIndex: 'group.name' },
+    { label: '状态', dataIndex: 'status', type: 'status' },
+    { label: '运营人员', dataIndex: 'operator.name' },
+  ],
+  [
+    { label: 'AI评价', dataIndex: 'ai_evaluation' },
+    { label: '粉丝量', dataIndex: 'fans_number', tooltip: '粉丝量' },
+    { label: '总赞藏数', dataIndex: 'like_number', tooltip: '总赞藏数' },
+  ],
+  [
+    { label: '观看量', dataIndex: 'view_number', tooltip: '观看量' },
+    { label: '观看量环比', dataIndex: 'view_chain', tooltip: '观看量环比', suffix: '%', type: 'rate' },
+    { label: '点赞量', dataIndex: 'like_number', tooltip: '点赞量' },
+    { label: '点赞量环比', dataIndex: 'like_chain', tooltip: '点赞量环比', suffix: '%', type: 'rate' },
+  ],
+];
diff --git a/src/views/property-marketing/media-account/account-detail/index.vue b/src/views/property-marketing/media-account/account-detail/index.vue
new file mode 100644
index 0000000..d40f532
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/index.vue
@@ -0,0 +1,30 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 11:21:10
+-->
+<template>
+  <div class="account-detail-wrap">
+    <div class="flex items-center mb-16px cursor-pointer" @click="handleBack">
+      <icon-left size="16" />
+      <spa class="cts ml-8px">账号详情</spa>
+    </div>
+    <AccountInfo />
+    <NoteTable />
+  </div>
+</template>
+
+<script setup>
+import AccountInfo from './components/account-info';
+import NoteTable from './components/note-table';
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const handleBack = () => {
+  router.push('/media-account/dashboard');
+};
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/media-account/account-detail/style.scss b/src/views/property-marketing/media-account/account-detail/style.scss
new file mode 100644
index 0000000..387d967
--- /dev/null
+++ b/src/views/property-marketing/media-account/account-detail/style.scss
@@ -0,0 +1,40 @@
+.account-detail-wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  :deep(.cts) {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  :deep(.title-row) {
+    display: flex;
+    height: 64px;
+    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%;
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+}
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 f825d5d..f9e48b3 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
@@ -7,7 +7,7 @@
 .card-container {
   flex: 1;
   display: grid;
-  grid-template-rows: repeat(2, 1fr); /* 2行 */
+  // grid-template-rows: repeat(2, 1fr); /* 2行 */
   grid-template-columns: repeat(4, 1fr); /* 4列 */
   gap: 20px;
   .card-item {
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 eaf6bd5..6303680 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
@@ -31,19 +31,19 @@
           <p v-if="!isSuccess" class="red-text">失败原因：{{ failReason || '-' }}</p>
         </template>
         <template v-else>
-          <div class="flex items-center mb-16px">
+          <!-- <div class="flex items-center mb-16px">
             <img :src="icon1" width="16" height="16" />
             <span class="ml-8px red-text">未识别到有效二维码。</span>
-          </div>
+          </div> -->
           <div class="img-box">
             <img :src="imgUrl" width="160" height="160" class="mb-16px" />
-            <div v-if="isOverdue" class="mask">
+            <div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
               <icon-refresh size="24" class="mb-13px" />
               <p class="s1">二维码失效</p>
               <p class="s1">请点击刷新</p>
             </div>
           </div>
-          <span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+          <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
         </template>
       </template>
     </div>
@@ -62,8 +62,10 @@ import icon1 from '@/assets/img/media-account/icon-warn.png';
 import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
 import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
 
+const OVERDUE_TIME = 30000; // 失效时间
+
 const visible = ref(false);
-const isOverdue = ref(false);
+const isOverdue = ref(false); // 二维码失效
 const isLoading = ref(false);
 const isCompleted = ref(false);
 const isSuccess = ref(false);
@@ -73,6 +75,7 @@ const id = ref('');
 const imgUrl = ref('');
 
 let progressTimer = null;
+let overdueTimer = null;
 
 const notCompleted = computed(() => {
   return !isCompleted.value;
@@ -84,7 +87,7 @@ const confirmBtnText = computed(() => {
 
 const open = (accountId) => {
   id.value = accountId;
-  handleAuthorizedImage();
+  getAuthorizedQrCode();
   visible.value = true;
 };
 const close = () => {
@@ -95,14 +98,21 @@ const close = () => {
   failReason.value = '';
   progress.value = 0;
   id.value = '';
-
+  clearFakeProgressTimer();
+  clearOverdueTimer();
   visible.value = false;
 };
 
-const handleAuthorizedImage = async () => {
+const getAuthorizedQrCode = async () => {
   const { code, data } = await getAuthorizedImage(id.value);
   if (code === 200) {
     imgUrl.value = data.url;
+    overdueTimer = null;
+
+    // 约定：后端限制40s内必须扫码，前端定30s后失效
+    overdueTimer = setTimeout(() => {
+      isOverdue.value = true;
+    }, OVERDUE_TIME);
   }
 };
 const startLoading = async () => {
@@ -136,18 +146,27 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
+const clearOverdueTimer = () => {
+  if (overdueTimer) {
+    clearTimeout(overdueTimer);
+    overdueTimer = null;
+  }
+};
 
 const handleOk = () => {
   if (notCompleted.value) {
+    clearOverdueTimer();
+
+    if (isOverdue.value) {
+      AMessage.error('二维码已失效，请重新扫码');
+      return;
+    }
+
     startLoading();
     return;
   }
 };
 
-onUnmounted(() => {
-  clearFakeProgressTimer();
-});
-
 defineExpose({
   open,
 });
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 cec8c08..404ca9d 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
@@ -27,8 +27,8 @@
         <span class="label">状态</span>
         <a-space class="w-180px">
           <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.label">{{
-              item.label
+            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
+              item.text
             }}</a-option>
           </a-select>
         </a-space>
@@ -54,7 +54,7 @@
         </a-space>
       </div>
     </div>
-    <div class="filter-row flex mb-20px">
+    <div class="filter-row flex">
       <div class="filter-row-item flex items-center">
         <span class="label">分组</span>
         <a-space class="w-200px">
@@ -112,7 +112,6 @@ const handleSearch = () => {
 };
 
 const handleReset = () => {
-  emits('update:query', cloneDeep(INITIAL_QUERY));
   emits('onReset');
 };
 
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 ef84c93..bdf86ce 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,11 +9,40 @@
     title="重新授权"
     modal-class="reauthorize-account-modal"
     :mask-closable="false"
-    :footer="!isLoading"
+    :footer="taskStep !== TASK_STEP.loading"
     @close="close"
   >
     <div class="flex flex-col items-center">
-      <template v-if="isLoading">
+      <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">
+            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
+            <div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
+              <icon-refresh size="24" class="mb-13px" />
+              <p class="s1">二维码失效</p>
+              <p class="s1">请点击刷新</p>
+            </div>
+          </div>
+          <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+        </template>
+      </template>
+      <template v-else-if="taskStep === TASK_STEP.loading">
         <a-progress
           :percent="progress"
           color="#6D4CFE"
@@ -24,57 +53,32 @@
         />
         <p class="s2 mt-16px">数据同步和初始化中，请勿关闭窗口。</p>
       </template>
-      <template v-else-if="loadingStep === 1">
-        <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-if="loadingStep === 2">
-        <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>
-        <template v-if="isCompleted">
+        <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="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>
-        <template v-else>
-          <div class="flex items-center mb-16px">
-            <img :src="icon1" width="16" height="16" />
-            <span class="ml-8px red-text">未识别到有效二维码。</span>
-          </div>
-          <div class="img-box">
-            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
-            <div v-if="isOverdue" class="mask">
-              <icon-refresh size="24" class="mb-13px" />
-              <p class="s1">二维码失效</p>
-              <p class="s1">请点击刷新</p>
-            </div>
-          </div>
-          <span class="mt-16px"> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
-        </template>
       </template>
     </div>
     <template #footer>
-      <a-button v-if="isCompleted || [1, 3].includes(actionType)" size="large" class="cancel-btn" @click="close"
+      <a-button
+        v-if="(taskStep === TASK_STEP.default && hasUnsyncData) || taskStep === TASK_STEP.end"
+        size="large"
+        class="cancel-btn"
+        @click="close"
         >取消</a-button
       >
       <a-button type="primary" size="large" @click="handleOk">{{ confirmBtnText }} </a-button>
@@ -91,64 +95,81 @@ 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-1.png';
 
+const OVERDUE_TIME = 30000; // 失效时间
+const TASK_STEP = {
+  default: 1,
+  loading: 2,
+  end: 3,
+};
+
 const visible = ref(false);
-const isOverdue = ref(false);
-const isLoading = ref(false);
-const isCompleted = ref(false);
+const isOverdue = ref(false); // 二维码失效
 const isSuccess = ref(false);
 const failReason = ref('');
 const progress = ref(0);
 const id = ref('');
 const imgUrl = ref('');
-const loadingStep = ref(0); // 1 | 2
+
+const taskStep = ref(TASK_STEP.default);
+const hasUnsyncData = ref(false); // 含有未同步数据
+const isNicknameChanged = ref(false); // 昵称发生变化
 const actionType = ref(1);
 
 let progressTimer = null;
+let overdueTimer = null;
 
-const notCompleted = computed(() => {
-  return !isCompleted.value;
-});
 const confirmBtnText = computed(() => {
-  if (loadingStep.value === 1) return '确定';
-  if (loadingStep.value === 2) return '确定覆盖';
+  if (taskStep.value === TASK_STEP.default) {
+    return hasUnsyncData.value ? '确定' : '完成扫码';
+  }
 
-  if (notCompleted.value) return '完成扫码';
+  if (taskStep.value === TASK_STEP.end) {
+    if (isNicknameChanged.value) return '确定覆盖';
+    return isSuccess.value ? '继续添加' : '重新扫码';
+  }
 
-  return isSuccess.value ? '继续添加' : '重新扫码';
+  return '';
 });
 
 const open = (accountId) => {
   id.value = accountId;
-  handleAuthorizedImage();
+  getAuthorizedQrCode();
   visible.value = true;
 };
 const close = () => {
   isOverdue.value = false;
-  isLoading.value = false;
-  isCompleted.value = false;
   isSuccess.value = false;
   failReason.value = '';
   progress.value = 0;
-  loadingStep.value = 0;
+  taskStep.value = TASK_STEP.default;
   actionType.value = 1;
+  hasUnsyncData.value = false;
+  isNicknameChanged.value = false;
   id.value = '';
-
+  clearFakeProgressTimer();
+  clearOverdueTimer();
   visible.value = false;
 };
 
-const handleAuthorizedImage = async () => {
+const getAuthorizedQrCode = async () => {
   const { code, data } = await getAuthorizedImage(id.value);
   if (code === 200) {
     imgUrl.value = data.url;
+    overdueTimer = null;
+
+    // 约定：后端限制40s内必须扫码，前端定30s后失效
+    overdueTimer = setTimeout(() => {
+      isOverdue.value = true;
+    }, OVERDUE_TIME);
   }
 };
 const startLoading = async () => {
-  isLoading.value = true;
+  taskStep.value = TASK_STEP.loading;
   progress.value = 0;
   startFakeProgressPolling();
   // const { code } = await startPatchAccount(id.value);
   // if (code === 200) {
-  //   isLoading.value = true;
+  //   taskStep.value = TASK_STEP.loading;
   //   progress.value = 0;
   //   startFakeProgressPolling();
   // }
@@ -162,7 +183,7 @@ const startFakeProgressPolling = () => {
       progress.value = Math.min(progress.value + step, 0.99);
       progress.value = Number(progress.value.toFixed(2));
     } else {
-      loadingStep.value = 2;
+      taskStep.value = TASK_STEP.end;
       clearFakeProgressTimer();
     }
   }, 1000);
@@ -174,23 +195,50 @@ const clearFakeProgressTimer = () => {
     progressTimer = null;
   }
 };
+const clearOverdueTimer = () => {
+  if (overdueTimer) {
+    clearTimeout(overdueTimer);
+    overdueTimer = null;
+  }
+};
+
+const getSyncDataStatus = () => {
+  return hasUnsyncData.value;
+};
 
 const handleOk = () => {
-  if (loadingStep.value === 1) {
+  if (taskStep.value === TASK_STEP.default) {
+    clearOverdueTimer();
+
+    if (isOverdue.value) {
+      AMessage.error('二维码已失效，请重新扫码');
+      return;
+    }
+
+    const _hasUnsyncData = getSyncDataStatus();
+    if (!_hasUnsyncData) {
+      hasUnsyncData.value = true;
+      return;
+    }
+
     startLoading();
     return;
   }
 
-  if (notCompleted.value) {
-    loadingStep.value = 1;
-    return;
+  if (taskStep.value === TASK_STEP.end) {
+    if (isNicknameChanged.value) {
+      isNicknameChanged.value = false;
+      console.log('确定覆盖');
+    } else {
+      if (isSuccess.value) {
+        console.log('继续添加');
+      } else {
+        console.log('重新扫码');
+      }
+    }
   }
 };
 
-onUnmounted(() => {
-  clearFakeProgressTimer();
-});
-
 defineExpose({
   open,
 });
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 967b937..93aee6a 100644
--- a/src/views/property-marketing/media-account/account-manage/constants.ts
+++ b/src/views/property-marketing/media-account/account-manage/constants.ts
@@ -34,32 +34,39 @@ export enum EnumStatus {
 
 export const STATUS_LIST = [
   {
+    text: '正常',
     label: '正常',
     value: EnumStatus.NORMAL,
   },
   {
+    text: '暂停同步',
     label: '暂停同步',
     value: EnumStatus.PAUSE,
   },
   {
+    text: '未授权',
     label: '未授权',
     value: EnumStatus.UNAUTHORIZED,
   },
   {
+    text: '异常',
     label: '异常',
     value: EnumStatus.ABNORMAL,
   },
   {
+    text: '异常-登录状态失效',
     label: '异常',
     value: EnumStatus.ABNORMAL_LOGIN,
     tooltip: '登录状态失效，需重新扫码授权',
   },
   {
+    text: '异常-请求过于频繁',
     label: '异常',
     value: EnumStatus.ABNORMAL_REQUEST,
     tooltip: '请求过于频繁，需等待24小时后重试',
   },
   {
+    text: '异常-账号被冻结/封禁',
     label: '异常',
     value: EnumStatus.ABNORMAL_FREEZE,
     tooltip: '账号被冻结/封禁',
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 f21fdbe..09c970e 100644
--- a/src/views/property-marketing/media-account/account-manage/index.vue
+++ b/src/views/property-marketing/media-account/account-manage/index.vue
@@ -4,7 +4,7 @@
 -->
 <template>
   <div class="account-manage-wrap">
-    <div class="filter-wrap bg-#fff border-radius-8px">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
       <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">
@@ -236,6 +236,10 @@ const handleSearch = () => {
   getData();
 };
 const handleReset = () => {
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
+  selectedItems.value = [];
   query.value = cloneDeep(INITIAL_QUERY);
   reload();
 };
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 1d9c9cb..f916046 100644
--- a/src/views/property-marketing/media-account/account-manage/style.scss
+++ b/src/views/property-marketing/media-account/account-manage/style.scss
@@ -13,8 +13,6 @@
     background: var(--BG-white, #fff);
   }
   .filter-wrap {
-    border-radius: 8px;
-    border: 1px solid #e6e6e8;
     .top {
       .title {
         font-family: 'Alibaba PuHuiTi';
@@ -84,39 +82,7 @@
       padding: 16px 24px;
       justify-content: flex-end;
       align-items: center;
-      :deep(.arco-pagination) {
-        .arco-pagination-list {
-          .arco-pagination-item {
-            border-radius: 4px;
-            border: 1px solid var(--BG-300, #e6e6e8);
-            &.arco-pagination-item-ellipsis {
-              border: none;
-            }
 
-            &.arco-pagination-item-active {
-              background-color: transparent;
-              border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-            }
-          }
-        }
-        .arco-pagination-jumper-input {
-          border-radius: 4px;
-          border: 1px solid var(--BG-300, #e6e6e8);
-        }
-        .arco-pagination-jumper-prepend {
-          color: var(--Text-2, #3c4043);
-          text-align: right;
-          font-family: 'Alibaba PuHuiTi';
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 22px; /* 157.143% */
-        }
-        .arco-select-view-single {
-          border-radius: 4px;
-          border: 1px solid var(--BG-300, #e6e6e8);
-        }
-      }
     }
   }
 }
diff --git a/src/views/property-marketing/put-account/account-data/components/account-table/constants.ts b/src/views/property-marketing/put-account/account-data/components/account-table/constants.ts
new file mode 100644
index 0000000..66496dd
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/components/account-table/constants.ts
@@ -0,0 +1,239 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 10:33:06
+ */
+export const TABLE_COLUMNS = [
+  {
+    title: '账号名称',
+    dataIndex: 'name',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '项目分组',
+    dataIndex: 'group.name',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '状态',
+    dataIndex: 'status',
+    width: 180,
+    fixed: 'left',
+  },
+  {
+    title: '运营人员',
+    dataIndex: 'operator.name',
+    width: 180,
+  },
+  {
+    title: '账户总消耗',
+    dataIndex: 'total_consumption',
+    width: 180,
+    tooltip: '账号总消耗',
+    prefix: '¥',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '账户余额',
+    dataIndex: 'balance',
+    width: 180,
+    tooltip: '账号余额',
+    prefix: '¥',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'AI评价',
+    dataIndex: 'ai_evaluation',
+    width: 260,
+  },
+  {
+    title: 'ROI',
+    dataIndex: 'roi',
+    width: 180,
+    tooltip: '账号ROI',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'ROI环比',
+    dataIndex: 'roi_chain',
+    width: 180,
+    tooltip: '相比上一周期的ROI变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CPA',
+    dataIndex: 'cpa',
+    width: 180,
+    tooltip: '账号CPA',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CPA环比',
+    dataIndex: 'roi_chain',
+    width: 180,
+    tooltip: '相比上一周期的CPA变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '转化数',
+    dataIndex: 'conversion_number',
+    width: 180,
+    tooltip: '账号转化数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '转化数环比',
+    dataIndex: 'conversion_chain',
+    width: 180,
+    tooltip: '相比上一周期的转化数变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CVR',
+    dataIndex: 'conversion_rate',
+    width: 180,
+    tooltip: '账号转化率',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: 'CVR环比',
+    dataIndex: 'conversion_rate_chain',
+    width: 180,
+    tooltip: '相比上一周期的CVR变化百分比',
+    align: 'right',
+    suffix: '%',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '最新投放计划标题/日期',
+    dataIndex: 'like_chain1',
+    width: 260,
+    tooltip: '最新发布内容的标题和发布日期',
+  },
+  {
+    title: '最新投放计划表现',
+    dataIndex: 'latest_plan_performance',
+    width: 180,
+    tooltip: '最新投放计划表现',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+
+  {
+    title: '展示量',
+    dataIndex: 'view_number',
+    width: 180,
+    tooltip: '账号所有内容的总展示次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '点击量',
+    dataIndex: 'click_number',
+    width: 180,
+    tooltip: '账号所有内容的总点击次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '点击率',
+    dataIndex: 'click_rate',
+    width: 180,
+    tooltip: '账号所有内容的总点击率',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '平均点击成本',
+    dataIndex: 'avg_click_cost',
+    width: 180,
+    tooltip: '账号所有内容的平均点击成本',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '千次展现费用',
+    dataIndex: 'cost_per_thousand_views',
+    width: 180,
+    prefix: '¥',
+    tooltip: '账号所有内容的千次展现费用',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '平均转化成本',
+    dataIndex: 'avg_conversion_cost',
+    width: 180,
+    prefix: '¥',
+    tooltip: '账号所有内容的平均转化成本',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '深度转化数',
+    dataIndex: 'deep_conversion_number',
+    width: 180,
+    tooltip: '账号所有内容的总深度转化次数',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+  {
+    title: '深度转化率',
+    dataIndex: 'deep_conversion_rate',
+    width: 180,
+    tooltip: '账号所有内容的总深度转化率',
+    align: 'right',
+    sortable: {
+      sortDirections: ['ascend', 'descend'],
+    },
+  },
+];
diff --git a/src/views/property-marketing/put-account/account-data/components/account-table/index.vue b/src/views/property-marketing/put-account/account-data/components/account-table/index.vue
new file mode 100644
index 0000000..914dbe2
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/components/account-table/index.vue
@@ -0,0 +1,213 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 18:08:04
+-->
+<template>
+  <div class="action-row mb-12px flex justify-between">
+    <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" class="!pl-13px" @change="handleSelectAll"
+      >全选</a-checkbox
+    >
+    <div class="flex items-center">
+      <a-button class="w-110px search-btn 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">
+        <template #icon>
+          <img :src="icon1" width="14" height="14" />
+        </template>
+        <template #default>自定义列</template>
+      </a-button>
+    </div>
+  </div>
+
+  <a-table
+    ref="tableRef"
+    :data="dataSource"
+    row-key="id"
+    :row-selection="rowSelection"
+    :selected-keys="selectedItems"
+    :pagination="false"
+    :scroll="{ x: '100%' }"
+    class="account-table w-100%"
+    bordered
+    @sorter-change="handleSorterChange"
+    @select="handleSelect"
+    @select-all="handleSelectAll"
+  >
+    <template #columns>
+      <a-table-column
+        v-for="column in getColumns()"
+        :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">
+            <img v-if="column.dataIndex === 'ai_evaluation'" width="16" height="16" :src="icon5" class="mr-4px" />
+            <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 === 'platform'" #cell="{ record }">
+          {{ record.platform === 0 ? '抖音' : record.platform === 1 ? '小红书' : '-' }}
+        </template>
+        <template v-else-if="column.dataIndex === 'status'" #cell="{ record }">
+          <div class="status-tag" :class="`status-tag-${record.status}`">
+            <span class="cts status-tag-text">{{
+              STATUS_LIST.find((item) => item.value === record.status)?.label
+            }}</span>
+          </div>
+        </template>
+        <template v-else-if="column.dataIndex === 'ai_evaluation'" #cell="{ record }">
+          <div class="ai-evaluation-row flex">
+            <img
+              width="16"
+              height="16"
+              :src="record.ai_evaluation?.status === 1 ? icon4 : record.ai_evaluation?.status === 2 ? icon3 : icon2"
+              class="mr-8px icon"
+            />
+            <div>
+              <p class="cts">{{ record.ai_evaluation?.text }}</p>
+              <p class="cts text-12px lh-20px !color-#939499">
+                {{ `ROI: ${record.ai_evaluation?.look_chain}%  CVR: ${record.ai_evaluation?.like_chain}%` }}
+              </p>
+            </div>
+          </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>
+        </template>
+
+        <template
+          v-else-if="
+            [
+              'view_chain',
+              'roi_chain',
+              'like_chain',
+              'cpa_chain',
+              'conversion_chain',
+              'conversion_rate_chain',
+            ].includes(column.dataIndex)
+          "
+          #cell="{ record }"
+        >
+          <div class="flex items-center rate-row justify-end" :class="record[column.dataIndex] > 0 ? 'up' : 'down'">
+            <icon-arrow-up v-if="record[column.dataIndex] > 0" size="16" />
+            <icon-arrow-down v-else size="16" />
+            {{ formatTableField(column, record) }}
+          </div>
+        </template>
+        <template v-else-if="['like_chain1', 'like_chain4'].includes(column.dataIndex)" #cell="{ record }">
+          <p class="cts cursor-pointer hover:!color-#6D4CFE">打工人的环游世界旅行计划（国内版）</p>
+          <p class="cts text-12px lh-20px !color-#939499">2025-06-18</p>
+        </template>
+
+        <template v-else #cell="{ record }">
+          {{ formatTableField(column, record, true) }}
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { STATUS_LIST } from '../../constants';
+import { formatTableField } from '@/utils/tools';
+import { TABLE_COLUMNS } from './constants';
+import { useRouter } from 'vue-router';
+
+import icon1 from '@/assets/img/media-account/icon-custom.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/icon5.png';
+
+const props = defineProps({
+  dataSource: {
+    type: Array,
+    default: () => [],
+  },
+  isAccountTab: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['selectionChange', 'sorterChange', 'export']);
+
+const router = useRouter();
+
+const selectedItems = ref([]);
+const tableRef = ref(null);
+
+const checkedAll = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length === props.dataSource.length,
+);
+const indeterminate = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length < props.dataSource.length,
+);
+
+const rowSelection = computed(() => ({
+  type: 'checkbox',
+  showCheckedAll: true,
+}));
+
+const handleSelectAll = (checked) => {
+  if (checked) {
+    selectedItems.value = props.dataSource.map((item) => item.id);
+  } else {
+    selectedItems.value = [];
+  }
+  emit('selectionChange', checked ? selectedItems.value : []);
+};
+
+const handleDetail = (record) => {
+  router.push(`/media-account/detail/${record.id}`);
+};
+
+// 处理排序变化
+const handleSorterChange = (column, order) => {
+  emit('sorterChange', column, order === 'ascend' ? 'asc' : 'desc');
+};
+
+const handleSelect = (selectedRowKeys, selectedRows) => {
+  selectedItems.value = selectedRowKeys;
+  emit('selectionChange', selectedRows);
+};
+
+const handleExport = () => {
+  emit('export');
+};
+const getColumns = () => {
+  const columns = cloneDeep(TABLE_COLUMNS);
+  if (!props.isAccountTab) {
+    const _target = columns.find((item) => item.dataIndex === 'name');
+    _target.title = '项目名称';
+  }
+  return columns;
+};
+
+const resetTable = () => {
+  selectedItems.value = [];
+  tableRef.value?.clearSorters();
+};
+
+defineExpose({
+  resetTable,
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/put-account/account-data/components/account-table/style.scss b/src/views/property-marketing/put-account/account-data/components/account-table/style.scss
new file mode 100644
index 0000000..cfdf11c
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/components/account-table/style.scss
@@ -0,0 +1,63 @@
+.action-row {
+  :deep(.arco-btn) {
+    .arco-btn-icon {
+      line-height: 14px;
+    }
+  }
+}
+
+.account-table {
+  .cts {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+  .status-tag {
+    width: fit-content;
+    display: flex;
+    height: 28px;
+    padding: 0px 8px;
+    align-items: center;
+    border-radius: 2px;
+    background: var(--Functional-Red-1, #ffe9e7);
+
+    .status-tag-text {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+    &-3 {
+      background: #fff7e5;
+      .status-tag-text {
+        color: var(--Functional-yellow-6, #ffae00);
+      }
+    }
+    &-1 {
+      background: var(--Functional-Green-1, #ebf7f2);
+      .status-tag-text {
+        color: var(--Functional-Green-6, #25c883);
+      }
+    }
+    &-0 {
+      background: var(--BG-200, #f2f3f5);
+      .status-tag-text {
+        color: var(--Text-2, #3c4043);
+      }
+    }
+  }
+  .ai-evaluation-row {
+    .icon {
+      position: relative;
+      top: 1px;
+    }
+  }
+  .rate-row {
+    &.up {
+      color: var(--Functional-Red-6, #f64b31);
+    }
+    &.down {
+      color: var(--Functional-Green-6, #25c883);
+    }
+  }
+}
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
new file mode 100644
index 0000000..37e1fb9
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
@@ -0,0 +1,123 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 14:02:40
+-->
+<template>
+  <div class="container px-24px">
+    <div class="filter-row flex mb-20px">
+      <div class="filter-row-item flex items-center">
+        <span class="label">账号名称</span>
+        <a-space size="medium" class="w-240px">
+          <a-input v-model="query.name" 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">
+        <span class="label">项目分组</span>
+        <a-space class="w-200px">
+          <group-select 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-180px">
+          <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
+              item.text
+            }}</a-option>
+          </a-select>
+        </a-space>
+      </div>
+      <div class="filter-row-item flex items-center">
+        <span class="label">运营人员</span>
+        <a-space class="w-160px">
+          <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
+            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
+              item.name
+            }}</a-option>
+          </a-select>
+        </a-space>
+      </div>
+    </div>
+    <div class="filter-row flex">
+      <div class="filter-row-item flex items-center">
+        <span class="label">时间筛选</span>
+        <a-space class="w-240px">
+          <a-range-picker
+            v-model="query.date_range"
+            size="medium"
+            allow-clear
+            format="YYYY-MM-DD HH:mm"
+            class="w-100%"
+          />
+        </a-space>
+      </div>
+      <a-button class="w-84px search-btn 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">
+        <template #icon>
+          <icon-refresh />
+        </template>
+        <template #default>重置</template>
+      </a-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { reactive, defineEmits, defineProps } from 'vue';
+import { fetchAccountGroups, fetchAccountOperators } from '@/api/all/propertyMarketing';
+import GroupSelect from '../group-select/index.vue';
+import { STATUS_LIST } from '../../constants';
+
+const props = defineProps({
+  query: {
+    type: Object,
+    required: true,
+  },
+});
+
+const emits = defineEmits('onSearch', 'onReset', 'update:query');
+
+const tags = ref([]);
+const groups = ref([]);
+const operators = ref([]);
+
+const handleSearch = () => {
+  emits('onSearch', props.query);
+};
+
+const handleReset = () => {
+  emits('onReset');
+};
+
+const getGroups = async () => {
+  const { code, data } = await fetchAccountGroups();
+  if (code === 200) {
+    groups.value = data;
+  }
+};
+const getOperators = async () => {
+  const { code, data } = await fetchAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+
+onMounted(() => {
+  // getGroups();
+  // getOperators();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..b29af44
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
@@ -0,0 +1,37 @@
+.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) {
+        margin-right: 24px;
+      }
+      .label {
+        margin-right: 8px;
+        color: #211f24;
+        font-family: 'Alibaba PuHuiTi';
+        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/put-account/account-data/components/group-select/index.vue b/src/views/property-marketing/put-account/account-data/components/group-select/index.vue
new file mode 100644
index 0000000..a736c92
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/components/group-select/index.vue
@@ -0,0 +1,64 @@
+<!--
+ * @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/put-account/account-data/constants.ts b/src/views/property-marketing/put-account/account-data/constants.ts
new file mode 100644
index 0000000..9d1c490
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/constants.ts
@@ -0,0 +1,65 @@
+/*
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 14:16:25
+ */
+
+export const INITIAL_QUERY = {
+  name: '',
+  status: '',
+  operator_id: '',
+  group_ids: [],
+  date_range: [],
+  column: '',
+  order: '',
+};
+
+export enum EnumStatus {
+  NORMAL = 1,
+  PAUSE = 3,
+  UNAUTHORIZED = 0,
+  ABNORMAL = 2,
+  ABNORMAL_LOGIN = 4,
+  ABNORMAL_REQUEST = 5,
+  ABNORMAL_FREEZE = 6,
+}
+
+export const STATUS_LIST = [
+  {
+    text: '正常',
+    label: '正常',
+    value: EnumStatus.NORMAL,
+  },
+  {
+    text: '暂停同步',
+    label: '暂停同步',
+    value: EnumStatus.PAUSE,
+  },
+  {
+    text: '未授权',
+    label: '未授权',
+    value: EnumStatus.UNAUTHORIZED,
+  },
+  {
+    text: '异常',
+    label: '异常',
+    value: EnumStatus.ABNORMAL,
+  },
+  {
+    text: '异常-登录状态失效',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_LOGIN,
+    tooltip: '登录状态失效，需重新扫码授权',
+  },
+  {
+    text: '异常-请求过于频繁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_REQUEST,
+    tooltip: '请求过于频繁，需等待24小时后重试',
+  },
+  {
+    text: '异常-账号被冻结/封禁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_FREEZE,
+    tooltip: '账号被冻结/封禁',
+  },
+];
diff --git a/src/views/property-marketing/put-account/account-data/index.vue b/src/views/property-marketing/put-account/account-data/index.vue
new file mode 100644
index 0000000..08ed31a
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/index.vue
@@ -0,0 +1,245 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-28 14:13:42
+-->
+<template>
+  <div class="account-data-wrap">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid pb-24px mb-16px">
+      <a-tabs v-model="activeTab" @tab-click="handleTabClick">
+        <a-tab-pane :key="1" title="账户"></a-tab-pane>
+        <a-tab-pane :key="2" title="项目"></a-tab-pane>
+      </a-tabs>
+      <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"
+    >
+      <AccountTable
+        ref="accountTableRef"
+        :isAccountTab="isAccountTab"
+        :dataSource="dataSource"
+        @export="handleExport"
+        @sorterChange="handleSorterChange"
+        @selectionChange="handleSelectionChange"
+      />
+      <div class="pagination-box">
+        <a-pagination
+          :total="pageInfo.total"
+          size="mini"
+          show-total
+          show-jumper
+          show-page-size
+          :current="pageInfo.page"
+          :page-size="pageInfo.pageSize"
+          @change="onPageChange"
+          @page-size-change="onPageSizeChange"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import FilterBlock from './components/filter-block';
+import AccountTable from './components/account-table';
+import { INITIAL_QUERY } from './constants';
+
+const query = ref({});
+const dataSource = ref([]);
+const pageInfo = reactive({
+  page: 1,
+  pageSize: 20,
+  total: 100,
+});
+const selectedRowKeys = ref([]);
+const activeTab = ref(1);
+const accountTableRef = ref(null);
+
+const isAccountTab = computed(() => activeTab.value === 1);
+
+const mockData = [
+  {
+    id: 1,
+    name: '抖音官方账号',
+    mobile: '13800138001',
+    account_id: 'douyin_001',
+    holder_name: '张三',
+    operator_id: 1,
+    platform: 0,
+    group_id: 1,
+    status: 1,
+    is_pause: 0,
+    fans_number: 1250000,
+    like_number: 890000,
+    collect_number: 45000,
+    view_number: 5600000,
+    view_chain: 12.5,
+    like_chain: 8.3,
+    total_consumption: 1000000,
+    balance: 1000000,
+    roi: 1.2,
+    roi_chain: -32.5,
+    cpa: 1.2,
+    cpa_chain: -32.5,
+    conversion_number: 10000,
+    conversion_chain: 12.5,
+    conversion_rate: 1.2,
+    conversion_rate_chain: -2.5,
+    ai_evaluation: {
+      status: 1,
+      text: '表现优质 | 建议保持',
+      look_chain: 12.5,
+      like_chain: 8.3,
+    },
+    operator: {
+      id: 1,
+      name: '李运营',
+    },
+    group: {
+      id: 1,
+      name: '抖音组',
+    },
+  },
+  {
+    id: 2,
+    name: '小红书美妆号',
+    mobile: '13800138002',
+    account_id: 'xhs_001',
+    holder_name: '李四',
+    operator_id: 2,
+    platform: 1,
+    group_id: 2,
+    status: 1,
+    is_pause: 1,
+    fans_number: 890000,
+    like_number: 670000,
+    collect_number: 89000,
+    view_number: 3200000,
+    view_chain: -5.2,
+    like_chain: 15.7,
+    total_consumption: 1000000,
+    balance: 1000000,
+    roi: 1.2,
+    roi_chain: 12.5,
+    cpa: 1.2,
+    cpa_chain: 22.5,
+    conversion_number: 10000,
+    conversion_chain: 12.5,
+    conversion_rate: 1.2,
+    conversion_rate_chain: -2.5,
+    ai_evaluation: {
+      status: 2,
+      text: '表现中等 | 建议优化',
+      look_chain: -12.5,
+      like_chain: 8.3,
+    },
+    operator: {
+      id: 2,
+      name: '王运营',
+    },
+    group: {
+      id: 2,
+      name: '小红书组',
+    },
+  },
+  {
+    id: 3,
+    name: '抖音美食号',
+    mobile: '13800138003',
+    account_id: 'douyin_002',
+    holder_name: '王五',
+    operator_id: 1,
+    platform: 0,
+    group_id: 1,
+    status: 0,
+    is_pause: 0,
+    fans_number: 0,
+    like_number: 0,
+    collect_number: 0,
+    view_number: 0,
+    view_chain: 0,
+    like_chain: 0,
+    total_consumption: 1000000,
+    balance: 1000000,
+    roi: 32898,
+    roi_chain: 12.5,
+    cpa: 1.2,
+    cpa_chain: -32.5,
+    conversion_number: 10000,
+    conversion_chain: 12.5,
+    conversion_rate: 1.2,
+    conversion_rate_chain: -2.5,
+    ai_evaluation: {
+      status: 3,
+      text: '表现较差 | 建议整改',
+      look_chain: -12.5,
+      like_chain: -8.3,
+    },
+    operator: {
+      id: 1,
+      name: '李运营',
+    },
+    group: {
+      id: 1,
+      name: '抖音组',
+    },
+  },
+];
+
+const getData = () => {
+  dataSource.value = mockData;
+  pageInfo.total = mockData.length;
+};
+
+const onPageChange = (current) => {
+  pageInfo.page = current;
+  getData();
+};
+
+const onPageSizeChange = (pageSize) => {
+  pageInfo.pageSize = pageSize;
+  reload();
+};
+
+const handleSearch = () => {
+  getData();
+};
+
+const reload = () => {
+  pageInfo.page = 1;
+  getData();
+};
+
+const handleReset = () => {
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
+  selectedRowKeys.value = [];
+  accountTableRef.value?.resetTable();
+  query.value = cloneDeep(INITIAL_QUERY);
+  reload();
+};
+
+const handleSorterChange = (column, order) => {
+  query.value.column = column;
+  query.value.order = order;
+  reload();
+};
+const handleSelectionChange = (selectedRows) => {
+  selectedRowKeys.value = selectedRows;
+  console.log('选中的账号:', selectedRowKeys.value);
+};
+
+const handleTabClick = (tab) => {
+  activeTab.value = tab.key;
+  handleReset();
+};
+
+onMounted(() => {
+  getData();
+});
+</script>
+
+<style scoped lang="scss">
+@import './style.scss';
+</style>
diff --git a/src/views/property-marketing/put-account/account-data/style.scss b/src/views/property-marketing/put-account/account-data/style.scss
new file mode 100644
index 0000000..f358776
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-data/style.scss
@@ -0,0 +1,58 @@
+.account-data-wrap {
+    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;
+    :deep(.arco-tabs) {
+      .arco-tabs-tab {
+        height: 56px;
+        padding: 0 8px;
+      }
+    }
+    .top {
+      .title {
+        font-family: 'Alibaba PuHuiTi';
+        font-style: normal;
+      }
+      :deep(.arco-btn) {
+        .arco-btn-icon {
+          line-height: 14px;
+        }
+      }
+    }
+    .overview-row {
+      .overview-item {
+        height: 88px;
+        border-radius: 8px;
+        background: var(--BG-100, #f7f8fa);
+        padding: 16px;
+        &:not(:last-child) {
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+
+  .table-wrap {
+    width: 100%;
+    .pagination-box {
+      display: flex;
+      width: 100%;
+      padding: 16px 24px;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+}
\ No newline at end of file
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
new file mode 100644
index 0000000..f1752be
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/delete-account.vue
@@ -0,0 +1,69 @@
+<!--
+ * @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"
+    :title="isBatch ? '批量删除账号' : '删除账号'"
+    width="400px"
+    modal-class="account-manage-modal"
+    @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 class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px danger-btn" status="danger" size="large" @click="onDelete"
+        >确认删除</a-button
+      >
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { deleteMediaAccount, batchDeleteMediaAccounts } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const accountId = ref(null);
+const accountName = ref('');
+
+const isBatch = computed(() => Array.isArray(accountId.value));
+
+function onClose() {
+  visible.value = false;
+  accountId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  accountId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onDelete() {
+  const _fn = isBatch ? batchDeleteMediaAccounts : deleteMediaAccount;
+  const { code } = await _fn(accountId.value);
+  if (code === 200) {
+    AMessage.success('删除成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
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 8828433..e6e4da7 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
@@ -5,14 +5,12 @@
 <template>
   <div class="card-container">
     <div v-for="(item, index) in dataSource" :key="index" class="card-item">
-      <a-checkbox></a-checkbox>
+      <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>
         <div class="field-row">
           <span class="label">状态</span>
-          <div class="status-box" :class="`status-box-${item.status}`">
-            <span class="text">{{ STATUS_LIST.find((v) => v.value === item.status)?.label ?? '-' }}</span>
-          </div>
+          <StatusBox :status="item.status" />
         </div>
         <div class="field-row">
           <span class="label">平台</span>
@@ -37,31 +35,64 @@
         <div class="field-row">
           <span class="label">标签</span>
           <div class="flex items-center">
-            <div v-for="(tag, index) in item.tags" :key="index" class="tag-box">
+            <a-tooltip
+              v-if="item.tags.length > 2"
+              position="bottom"
+              :content="
+                item.tags
+                  .slice(2)
+                  .map((v) => v.name)
+                  .join(',')
+              "
+            >
+              <div class="tag-box">
+                <span class="text">{{ `+${item.tags.length - 2}` }}</span>
+              </div>
+            </a-tooltip>
+
+            <div v-for="(tag, index) in item.tags.slice(0, 2).reverse()" :key="index" class="tag-box">
               <span class="text">{{ tag.name }}</span>
             </div>
           </div>
         </div>
         <div class="operate-row">
-          <img :src="icon3" width="16" height="16" class="mr-8px cursor-pointer" />
-          <a-button class="w-64px search-btn mr-8px" size="mini">
+          <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-button class="w-64px search-btn mr-8px" size="mini">
-            <template #default>获取凭证</template>
-          </a-button>
-          <a-button class="w-40px search-btn" size="mini">
+          <a-tooltip v-if="isDisabledReauthorize(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>
+    <PauseAccountPatchModal ref="pauseAccountPatchModalRef" @success="emits('update')" />
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" @success="emits('update')" />
   </div>
 </template>
 
 <script setup>
-import { defineProps } from 'vue';
-import { STATUS_LIST } from '../../constants';
+import { defineProps, ref, computed } from 'vue';
+import { STATUS_LIST, EnumStatus } from '../../constants';
+import PauseAccountPatchModal from './pause-account-patch';
+import StatusBox from '../status-box';
+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';
@@ -72,7 +103,66 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  selectedItems: {
+    type: Array,
+    default: () => [],
+  },
 });
+
+const emits = defineEmits(['openEdit', 'update', 'selectionChange', 'delete']);
+
+const pauseAccountPatchModalRef = ref(null);
+const authorizedAccountModalRef = ref(null);
+
+// 判断当前 item 是否被选中
+const isSelected = (item) => {
+  return props.selectedItems.some((i) => i.id === item.id);
+};
+
+const toggleSelect = (item) => {
+  let newSelected;
+  if (isSelected(item)) {
+    newSelected = props.selectedItems.filter((i) => i.id !== item.id);
+  } else {
+    newSelected = [...props.selectedItems, item];
+  }
+  emits('selectionChange', newSelected);
+};
+
+const openEdit = (item) => {
+  emits('openEdit', item);
+};
+
+const openDelete = (item) => {
+  emits('delete', item);
+};
+
+const handleReauthorize = (item) => {
+  const isUnauthorized = isUnauthorizedStatus(item.status);
+  if (isUnauthorized) {
+    authorizedAccountModalRef.value?.open(item.id);
+  }
+};
+
+const handlePause = (item) => {
+  pauseAccountPatchModalRef.value?.open(item);
+};
+
+const showPauseButton = (status) => {
+  return ![EnumStatus.PAUSE, EnumStatus.UNAUTHORIZED].includes(status);
+};
+const isUnauthorizedStatus = (status) => {
+  return [EnumStatus.UNAUTHORIZED].includes(status);
+};
+
+// 三种异常情况
+const isDisabledReauthorize = (status) => {
+  return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
+};
+
+const getTooltipText = (status) => {
+  return STATUS_LIST.find((v) => v.value === status)?.tooltip ?? '-';
+};
 </script>
 
 <style scoped lang="scss">
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
new file mode 100644
index 0000000..00e5218
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/account-table/pause-account-patch.vue
@@ -0,0 +1,54 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-27 14:41:20
+-->
+<template>
+  <a-modal v-model:visible="visible" title="暂停同步" width="400px" modal-class="account-manage-modal" @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 class="cancel-btn" size="large" @click="onClose">取消</a-button>
+      <a-button type="primary" class="ml-16px" size="large" @click="onConfirm">确定</a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { pausePatchAccount } from '@/api/all/propertyMarketing';
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const emits = defineEmits(['success', 'close']);
+
+const visible = ref(false);
+const accountId = ref(null);
+const accountName = ref('');
+
+function onClose() {
+  visible.value = false;
+  accountId.value = null;
+  accountName.value = '';
+  emits('close');
+}
+
+const open = (record) => {
+  const { id = null, name = '' } = record;
+  accountId.value = id;
+  accountName.value = name;
+
+  visible.value = true;
+};
+
+async function onConfirm() {
+  const { code } = await pausePatchAccount(accountId.value);
+  if (code === 200) {
+    AMessage.success('暂停成功');
+    emits('success');
+    onClose();
+  }
+}
+
+defineExpose({ open });
+</script>
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 0a75fe9..f9e48b3 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,7 +1,13 @@
+@mixin ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .card-container {
   flex: 1;
   display: grid;
-  grid-template-rows: repeat(2, 1fr); /* 2行 */
+  // grid-template-rows: repeat(2, 1fr); /* 2行 */
   grid-template-columns: repeat(4, 1fr); /* 4列 */
   gap: 20px;
   .card-item {
@@ -21,6 +27,8 @@
       // line-height: 22px; /* 157.143% */
     }
     .label {
+      margin-right: 20px;
+      flex-shrink: 0;
       color: var(--Text-3, #737478);
       font-family: 'Alibaba PuHuiTi';
       font-size: 12px;
@@ -34,6 +42,7 @@
       display: flex;
       justify-content: space-between;
       .cts {
+        @include ellipsis;
         color: var(--Text-2, #3c4043);
         font-family: 'Alibaba PuHuiTi';
         font-size: 12px;
@@ -41,42 +50,16 @@
         font-weight: 400;
         line-height: 20px; /* 166.667% */
       }
-      .status-box {
-        display: flex;
-        padding: 0px 8px;
-        align-items: center;
-        border-radius: 2px;
-        background: #f2f3f5;
-        .text {
-          color: var(--BG-700, #737478);
-          font-family: 'Alibaba PuHuiTi';
-          font-size: 12px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 20px; /* 166.667% */
-        }
-
-        &-1 {
-          background: #ebf7f2;
-          .text {
-            color: #25c883;
-          }
-        }
-        &-2 {
-          background: #ffe7e4;
-          .text {
-            color: #f64b31;
-          }
-        }
-      }
       .tag-box {
         display: flex;
-        height: 16px;
+        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: 'Alibaba PuHuiTi';
           font-size: 10px;
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
new file mode 100644
index 0000000..c557c86
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/index.vue
@@ -0,0 +1,263 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    :title="isEdit ? '编辑账号' : '添加账号'"
+    modal-class="add-put-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 === 'default'">
+              <a-upload draggable :custom-request="handleUpload" />
+            </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 === 'error',
+                  }"
+                >
+                  <div class="flex items-center">
+                    <icon-file size="16" />
+                    <span class="name ml-8px">{{ fileName }}</span>
+                  </div>
+                  <span v-if="uploadStatus === 'error'" class="upload-error" @click="retryUpload">点击重试</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="号码持有人" field="holder_name" required>
+          <a-input v-model="form.holder_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="sync_project_data">
+          <template #label>
+            <span class="label">同步项目数据</span>
+            <icon-question-circle size="14" class="ml-4px color-#737478" />
+          </template>
+          <a-switch v-model="form.sync_project_data" size="medium" />
+        </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">
+        {{ confirmBtnText }}
+      </a-button>
+    </template>
+
+    <AuthorizedAccountModal ref="authorizedAccountModalRef" />
+    <ImportPromptModal ref="importPromptModalRef" />
+  </a-modal>
+</template>
+
+<script setup>
+import { ref, reactive } from 'vue';
+
+import AuthorizedAccountModal from '../authorized-account-modal';
+import ImportPromptModal from '../import-prompt-modal';
+import StatusBox from '../status-box';
+
+import {
+  postMediaAccounts,
+  getMediaAccountsDetail,
+  putMediaAccounts,
+  getTemplateUrl,
+} 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 visible = ref(false);
+const uploadType = ref('manual');
+const uploadStatus = ref('default');
+const id = ref('');
+const isEdit = ref(false);
+const fileName = ref('账号导入模板.xlsx');
+const formRef = ref();
+const authorizedAccountModalRef = ref(null);
+const importPromptModalRef = ref(null);
+const form = reactive({
+  mobile: '',
+  operator_name: '',
+  holder_name: '',
+  platform: 0,
+});
+
+const isBatchImport = computed(() => uploadType.value === 'batch');
+const confirmBtnText = computed(() => {
+  if (isBatchImport.value) return '确定导入';
+  return isEdit.value ? '确定' : '下一步';
+});
+
+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: '请输入号码持有人' }],
+};
+
+function handleUpload({ file, onSuccess, onError }) {
+  // 模拟上传
+  uploadStatus.value = 'error';
+}
+
+function removeFile() {
+  fileName.value = '';
+  uploadStatus.value = 'default';
+}
+
+function retryUpload() {
+  handleUpload();
+  // uploadStatus.value = 'default';
+}
+const reset = () => {
+  formRef.value.resetFields();
+  formRef.value.clearValidate();
+
+  fileName.value = '';
+  isEdit.value = false;
+  uploadStatus.value = 'default';
+  uploadType.value = 'manual';
+};
+function onClose() {
+  reset();
+  visible.value = false;
+}
+
+const open = (accountId = '') => {
+  id.value = accountId;
+  isEdit.value = !!accountId;
+
+  if (accountId) {
+    getAccountDetail();
+  }
+
+  visible.value = true;
+};
+
+const getAccountDetail = async () => {
+  const { code, data } = await getMediaAccountsDetail(id.value);
+  if (code === 200) {
+    form.value = data;
+  }
+};
+
+const handleBatchImport = () => {
+  onClose();
+  importPromptModalRef.value.open();
+};
+
+async function onSubmit() {
+  if (isBatchImport.value) {
+    handleBatchImport();
+    return;
+  }
+
+  handleSuccess();
+
+  formRef.value.validate(async (errors) => {
+    if (!errors) {
+      const _fn = id.value ? putMediaAccounts : postMediaAccounts;
+      const _params = id.value ? { id: id.value, ...form.value } : form;
+      const { code, data } = await _fn(_params);
+      if (code === 200) {
+        AMessage.success(isEdit.value ? '修改成功' : '添加成功');
+
+        if (isEdit.value) {
+          visible.value = false;
+        } else {
+          handleSuccess(data?.id);
+        }
+      }
+    }
+  });
+}
+
+const handleSuccess = (id) => {
+  authorizedAccountModalRef.value.open(id);
+};
+
+const handleDownloadTemplate = async () => {
+  const { code, data } = await getTemplateUrl();
+  if (code === 200) {
+    window.open(data.url, '_blank');
+  }
+};
+
+// 对外暴露打开弹窗方法
+defineExpose({ open });
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..22fe718
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/add-account-modal/style.scss
@@ -0,0 +1,63 @@
+@import "@/views/property-marketing/component.scss";
+.add-put-account-modal {
+  border-radius: 8px; 
+  .w-240px {
+    width: 240px !important;
+  }
+  .arco-modal-body {
+    .upload-block {
+      width: 100%;
+      .dt {
+        color: var(--Brand-Brand-6, #6d4cfe);
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px; /* 157.143% */
+      }
+      .import-row {
+        border-radius: 4px;
+        border: 1px solid var(--BG-400, #d7d7d9);
+        background: var(--BG-200, #f2f3f5);
+        .name {
+          color: var(--Text-1, #211f24);
+          font-family: 'Alibaba PuHuiTi';
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 400;
+          line-height: 22px; /* 157.143% */
+        }
+        &.error {
+          background: #ffe7e4;
+          color: #f64b31;
+          border: none;
+          .name {
+            color: #f64b31;
+          }
+        }
+      }
+      .arco-upload-drag {
+        height: 120px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .arco-icon {
+          margin-bottom: 16px;
+        }
+      }
+    }
+    .upload-dragger {
+      border: 1px dashed #d9d9d9;
+      padding: 24px 0;
+      text-align: center;
+      background: #fafafa;
+      cursor: pointer;
+    }
+    .upload-error {
+      color: #f53f3f;
+      margin-left: 8px;
+      cursor: pointer;
+    }
+  }
+}
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
new file mode 100644
index 0000000..6303680
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/index.vue
@@ -0,0 +1,177 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="480px"
+    title="授权账号"
+    modal-class="authorized-account-modal"
+    :mask-closable="false"
+    :footer="!isLoading"
+    @close="close"
+  >
+    <div class="flex flex-col items-center">
+      <template v-if="isLoading">
+        <a-progress
+          :percent="progress"
+          color="#6D4CFE"
+          trackColor="#E6E6E8"
+          size="large"
+          :stroke-width="4"
+          type="circle"
+        />
+        <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>
+        <template v-else>
+          <!-- <div class="flex items-center mb-16px">
+            <img :src="icon1" width="16" height="16" />
+            <span class="ml-8px red-text">未识别到有效二维码。</span>
+          </div> -->
+          <div class="img-box">
+            <img :src="imgUrl" width="160" height="160" class="mb-16px" />
+            <div v-if="isOverdue" class="mask" @click="getAuthorizedQrCode">
+              <icon-refresh size="24" class="mb-13px" />
+              <p class="s1">二维码失效</p>
+              <p class="s1">请点击刷新</p>
+            </div>
+          </div>
+          <span> 请使用抖音扫码，将公司账号绑定至灵机平台。 </span>
+        </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>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose, ref, onUnmounted } from 'vue';
+import { startPatchAccount, getAuthorizedImage } from '@/api/all/propertyMarketing';
+
+import icon1 from '@/assets/img/media-account/icon-warn.png';
+import icon2 from '@/assets/img/media-account/icon-feedback-success.png';
+import icon3 from '@/assets/img/media-account/icon-feedback-fail.png';
+
+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 failReason = ref('');
+const progress = ref(0);
+const id = ref('');
+const imgUrl = ref('');
+
+let progressTimer = null;
+let overdueTimer = null;
+
+const notCompleted = computed(() => {
+  return !isCompleted.value;
+});
+const confirmBtnText = computed(() => {
+  if (notCompleted.value) return '完成扫码';
+  return isSuccess.value ? '继续添加' : '重新扫码';
+});
+
+const open = (accountId) => {
+  id.value = accountId;
+  getAuthorizedQrCode();
+  visible.value = true;
+};
+const close = () => {
+  isOverdue.value = false;
+  isLoading.value = false;
+  isCompleted.value = false;
+  isSuccess.value = false;
+  failReason.value = '';
+  progress.value = 0;
+  id.value = '';
+  clearFakeProgressTimer();
+  clearOverdueTimer();
+  visible.value = false;
+};
+
+const getAuthorizedQrCode = async () => {
+  const { code, data } = await getAuthorizedImage(id.value);
+  if (code === 200) {
+    imgUrl.value = data.url;
+    overdueTimer = null;
+
+    // 约定：后端限制40s内必须扫码，前端定30s后失效
+    overdueTimer = setTimeout(() => {
+      isOverdue.value = true;
+    }, OVERDUE_TIME);
+  }
+};
+const startLoading = async () => {
+  isLoading.value = true;
+  progress.value = 0;
+  startFakeProgressPolling();
+  // const { code } = await startPatchAccount(id.value);
+  // if (code === 200) {
+  //   isLoading.value = true;
+  //   progress.value = 0;
+  //   startFakeProgressPolling();
+  // }
+};
+
+const startFakeProgressPolling = () => {
+  clearFakeProgressTimer();
+  progressTimer = setInterval(() => {
+    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 {
+      clearFakeProgressTimer();
+    }
+  }, 1000);
+};
+
+const clearFakeProgressTimer = () => {
+  if (progressTimer) {
+    clearInterval(progressTimer);
+    progressTimer = null;
+  }
+};
+const clearOverdueTimer = () => {
+  if (overdueTimer) {
+    clearTimeout(overdueTimer);
+    overdueTimer = null;
+  }
+};
+
+const handleOk = () => {
+  if (notCompleted.value) {
+    clearOverdueTimer();
+
+    if (isOverdue.value) {
+      AMessage.error('二维码已失效，请重新扫码');
+      return;
+    }
+
+    startLoading();
+    return;
+  }
+};
+
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..a476920
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/authorized-account-modal/style.scss
@@ -0,0 +1,49 @@
+@import '@/views/property-marketing/component.scss';
+
+.authorized-account-modal {
+  border-radius: 8px;
+  .img-box {
+    position: relative;
+    .mask {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      opacity: 0.8;
+      background: #000;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #fff;
+      .s1 {
+        color: var(--BG-White, #fff);
+        text-align: center;
+        font-family: 'Alibaba PuHuiTi';
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 22px;
+      }
+    }
+  }
+  .s2 {
+    color: var(--Text-1, #211f24);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px; 
+  }
+  .red-text {
+    overflow: hidden;
+    color: var(--Functional-Red-6, #f64b31);
+    text-overflow: ellipsis;
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 22px;
+  }
+}
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 39dc8f2..0e4ffbf 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
@@ -1,3 +1,4 @@
+<!-- eslint-disable vue/no-mutating-props -->
 <!--
  * @Author: RenXiaoDong
  * @Date: 2025-06-25 14:02:40
@@ -24,10 +25,10 @@
       </div>
       <div class="filter-row-item flex items-center">
         <span class="label">状态</span>
-        <a-space class="w-160px">
+        <a-space class="w-180px">
           <a-select v-model="query.status" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.label">{{
-              item.label
+            <a-option v-for="(item, index) in STATUS_LIST" :key="index" :value="item.value" :label="item.text">{{
+              item.text
             }}</a-option>
           </a-select>
         </a-space>
@@ -46,13 +47,15 @@
         <span class="label">运营人员</span>
         <a-space class="w-160px">
           <a-select v-model="query.operator_id" size="medium" placeholder="全部" allow-clear @change="handleSearch">
-            <a-option value="Beijing" label="Beijing">Beijing</a-option>
+            <a-option v-for="(item, index) in operators" :key="index" :value="item.id" :label="item.name">{{
+              item.name
+            }}</a-option>
           </a-select>
         </a-space>
       </div>
     </div>
-    <a-space class="flex items-center">
-      <a-button class="w-84px search-btn" size="medium" @click="handleSearch">
+    <div class="filter-row flex">
+      <a-button class="w-84px search-btn mr-12px" size="medium" @click="handleSearch">
         <template #icon>
           <icon-search />
         </template>
@@ -64,29 +67,47 @@
         </template>
         <template #default>重置</template>
       </a-button>
-    </a-space>
+    </div>
   </div>
 </template>
 
 <script setup>
-import { reactive, defineEmits, defineProps } from 'vue';
+import { defineEmits, defineProps } from 'vue';
+import { fetchAccountOperators } from '@/api/all/propertyMarketing';
 import {
   INITIAL_QUERY,
   PLATFORM_LIST,
   STATUS_LIST,
-} from '@/views/property-marketing/media-account/account-manage/constants';
+} from '@/views/property-marketing/put-account/account-manage/constants';
 
-const emits = defineEmits('onSearch', 'onReset');
+const props = defineProps({
+  query: {
+    type: Object,
+    required: true,
+  },
+});
 
-const query = ref(cloneDeep(INITIAL_QUERY));
+const emits = defineEmits('onSearch', 'onReset', 'update:query');
+
+const operators = ref([]);
 
 const handleSearch = () => {
-  emits('onSearch', query);
+  emits('onSearch', props.query);
 };
+
 const handleReset = () => {
-  query.value = cloneDeep(INITIAL_QUERY);
   emits('onReset');
 };
+const getOperators = async () => {
+  const { code, data } = await fetchAccountOperators();
+  if (code === 200) {
+    operators.value = data;
+  }
+};
+
+onMounted(() => {
+  // getOperators();
+});
 </script>
 
 <style scoped lang="scss">
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
new file mode 100644
index 0000000..5fd6c1e
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/index.vue
@@ -0,0 +1,49 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 17:51:46
+-->
+<template>
+  <a-modal
+    v-model:visible="visible"
+    width="480px"
+    title="导入提示"
+    modal-class="import-prompt-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" />
+        <span class="tip"> 账号已成功导入，当前为未授权状态。请前往卡片列表手动授权，完成授权后账号可正常使用。 </span>
+      </div>
+    </div>
+    <template #footer>
+      <a-button size="large" class="mr-16px cancel-btn" @click="close">取消</a-button>
+      <a-button type="primary" size="large" @click="handleOk"> 去授权 </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup>
+import { defineExpose } from 'vue';
+
+import icon1 from '@/assets/img/media-account/icon-warn-1.png';
+
+const visible = ref(false);
+const open = () => {
+  visible.value = true;
+};
+const close = () => {
+  visible.value = false;
+};
+const handleOk = () => {
+  close();
+};
+defineExpose({
+  open,
+});
+</script>
+
+<style lang="scss">
+@import './style.scss';
+</style>
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
new file mode 100644
index 0000000..e299151
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/import-prompt-modal/style.scss
@@ -0,0 +1,14 @@
+@import "@/views/property-marketing/component.scss";
+.import-prompt-modal {
+  border-radius: 8px;
+  .arco-modal-body {
+    .tip {
+      color: var(--Text-1, #211f24);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+    }
+  }
+}
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
new file mode 100644
index 0000000..9a94451
--- /dev/null
+++ b/src/views/property-marketing/put-account/account-manage/components/status-box/index.vue
@@ -0,0 +1,96 @@
+<!--
+ * @Author: RenXiaoDong
+ * @Date: 2025-06-25 15:31:15
+-->
+<template>
+  <div class="status-box" :class="`status-box-${status}`">
+    <span class="text">{{ statusText }}</span>
+    <a-tooltip v-if="showTooltip" :content="tooltipText">
+      <img v-if="showIcon" :src="iconSrc" width="12" height="12" class="ml-4px" />
+    </a-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { STATUS_LIST, EnumStatus } from '../../constants';
+
+import iconWarn1 from '@/assets/img/media-account/icon-warn-1.png';
+import iconWarn2 from '@/assets/img/media-account/icon-warn-2.png';
+
+const props = defineProps({
+  status: {
+    type: Number,
+    required: true,
+  },
+});
+
+const statusText = computed(() => {
+  return STATUS_LIST.find((v) => v.value === props.status)?.label ?? '-';
+});
+
+const showTooltip = computed(() => {
+  return isDisabledReauthorize(props.status);
+});
+
+const tooltipText = computed(() => {
+  return STATUS_LIST.find((v) => v.value === props.status)?.tooltip ?? '-';
+});
+
+const showIcon = computed(() => {
+  return ![EnumStatus.NORMAL, EnumStatus.UNAUTHORIZED].includes(props.status);
+});
+
+const iconSrc = computed(() => {
+  return props.status === EnumStatus.PAUSE ? iconWarn1 : iconWarn2;
+});
+
+// 判断是否为禁用重新授权的状态
+const isDisabledReauthorize = (status) => {
+  return [EnumStatus.ABNORMAL_LOGIN, EnumStatus.ABNORMAL_REQUEST, EnumStatus.ABNORMAL_FREEZE].includes(status);
+};
+</script>
+
+<style scoped lang="scss">
+.status-box {
+  display: flex;
+  padding: 0px 8px;
+  align-items: center;
+  border-radius: 2px;
+  background: #f2f3f5;
+
+  .text {
+    color: var(--BG-700, #737478);
+    font-family: 'Alibaba PuHuiTi';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px; /* 166.667% */
+  }
+
+  &-1 {
+    background: #ebf7f2;
+    .text {
+      color: #25c883;
+    }
+  }
+
+  &-2,
+  &-4,
+  &-5,
+  &-6 {
+    background: #ffe7e4;
+    .text {
+      color: #f64b31;
+    }
+  }
+
+  &-3 {
+    background: #fff7e5;
+    color: #ffae00;
+    .text {
+      color: #ffae00;
+    }
+  }
+}
+</style>
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 18c8201..703b871 100644
--- a/src/views/property-marketing/put-account/account-manage/constants.ts
+++ b/src/views/property-marketing/put-account/account-manage/constants.ts
@@ -20,17 +20,53 @@ export const PLATFORM_LIST = [
   },
 ];
 
+export enum EnumStatus {
+  NORMAL = 1,
+  PAUSE = 3,
+  UNAUTHORIZED = 0,
+  ABNORMAL = 2,
+  ABNORMAL_LOGIN = 4,
+  ABNORMAL_REQUEST = 5,
+  ABNORMAL_FREEZE = 6,
+}
+
 export const STATUS_LIST = [
   {
-    label: '未授权',
-    value: 0,
-  },
-  {
+    text: '正常',
     label: '正常',
-    value: 1,
+    value: EnumStatus.NORMAL,
   },
   {
+    text: '暂停同步',
+    label: '暂停同步',
+    value: EnumStatus.PAUSE,
+  },
+  {
+    text: '未授权',
+    label: '未授权',
+    value: EnumStatus.UNAUTHORIZED,
+  },
+  {
+    text: '异常',
     label: '异常',
-    value: 2,
+    value: EnumStatus.ABNORMAL,
+  },
+  {
+    text: '异常-登录状态失效',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_LOGIN,
+    tooltip: '登录状态失效，需重新扫码授权',
+  },
+  {
+    text: '异常-请求过于频繁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_REQUEST,
+    tooltip: '请求过于频繁，需等待24小时后重试',
+  },
+  {
+    text: '异常-账号被冻结/封禁',
+    label: '异常',
+    value: EnumStatus.ABNORMAL_FREEZE,
+    tooltip: '账号被冻结/封禁',
   },
 ];
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 44f7ff1..2b69bd9 100644
--- a/src/views/property-marketing/put-account/account-manage/index.vue
+++ b/src/views/property-marketing/put-account/account-manage/index.vue
@@ -4,50 +4,74 @@
 -->
 <template>
   <div class="account-manage-wrap">
-    <div class="filter-wrap bg-#fff border-radius-8px">
+    <div class="filter-wrap bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid">
       <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-139px search-btn" size="medium">
+          <a-button type="primary" class="w-112px search-btn" size="medium" @click="handleOpenAccountModal">
             <template #icon>
               <img :src="icon1" width="16" height="16" />
             </template>
-            <template #default>添加投放账号</template>
+            <template #default>添加账户</template>
           </a-button>
         </div>
       </div>
-      <FilterBlock @onSearch="handleSearch" @onReset="handleReset" />
+      <FilterBlock v-model:query="query" @onSearch="handleSearch" @onReset="handleReset" />
     </div>
 
     <div
       class="tip-row flex justify-between px-16px py-10px w-100% my-12px h-42px"
-      :class="{
-        normal: isNormalStatus,
-        abnormal: isAbnormalStatus,
-      }"
+      :class="selectedItems.length > 0 ? 'selected' : isNormalStatus ? 'normal' : 'abnormal'"
     >
       <div class="flex items-center">
-        <template v-if="isNormalStatus || isAbnormalStatus">
-          <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
-          <span class="label">
-            {{
-              isNormalStatus
-                ? '太棒啦！所有账号都在正常运行。'
-                : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
-            }}
-          </span>
-        </template>
+        <div class="flex items-center">
+          <template v-if="selectedItems.length > 0">
+            <a-checkbox
+              :model-value="checkedAll"
+              :indeterminate="indeterminate"
+              class="mr-8px"
+              @change="handleChangeAll"
+            />
+            <span class="label mr-24px">
+              已选
+              <span class="color-#6D4CFE">{{ selectedItems.length }}</span>
+              个账号
+            </span>
+
+            <span class="operation-btn red" @click="handleBatchDelete"> 批量删除 </span>
+          </template>
+          <template v-else>
+            <img :src="isNormalStatus ? icon4 : icon5" width="16" height="16" class="mr-8px" />
+            <span class="label">
+              {{
+                isNormalStatus
+                  ? '太棒啦！所有账号都在正常运行。'
+                  : `共有 12 个账号存在授权异常，其中：7 个已掉线，5 个已超过 5 天未登录，有掉线风险。`
+              }}
+            </span>
+          </template>
+        </div>
       </div>
-      <div>
+
+      <template v-if="selectedItems.length > 0">
+        <img :src="icon6" width="16" height="16" class="cursor-pointer" @click="handleCloseTip" />
+      </template>
+      <div v-else>
         <a-space v-if="isAbnormalStatus" class="flex items-center">
-          <a-button class="w-96px err-btn" size="mini">
+          <a-button class="w-96px err-btn" size="mini" @click="handleOpenAbnormalAccount">
             <template #default>查看异常账号</template>
           </a-button>
         </a-space>
       </div>
     </div>
     <div class="card-wrap">
-      <AccountTable :dataSource="dataSource" />
+      <AccountTable
+        :dataSource="dataSource"
+        :selectedItems="selectedItems"
+        @selectionChange="handleSelectionChange"
+        @delete="handleDelete"
+        @openEdit="handleOpenEdit"
+      />
       <div class="pagination-box">
         <a-pagination
           :total="pageInfo.total"
@@ -62,6 +86,9 @@
         />
       </div>
     </div>
+
+    <AddAccountModal ref="addAccountModalRef" />
+    <DeleteAccountModal ref="deleteAccountRef" @update="getData" />
   </div>
 </template>
 
@@ -70,11 +97,21 @@ import { ref } from 'vue';
 
 import FilterBlock from './components/filter-block';
 import AccountTable from './components/account-table';
+import AddAccountModal from './components/add-account-modal';
+import DeleteAccountModal from './components/account-table/delete-account';
+
 import { INITIAL_QUERY } from './constants';
+import { getMediaAccounts } from '@/api/all/propertyMarketing';
 
 import icon1 from '@/assets/img/media-account/icon-add.png';
 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';
+
+const groupManageModalRef = ref(null);
+const tagsManageModalRef = ref(null);
+const addAccountModalRef = ref(null);
+const deleteAccountRef = ref(null);
 
 const tipStatus = ref(2);
 const pageInfo = reactive({
@@ -82,49 +119,103 @@ const pageInfo = reactive({
   pageSize: 20,
   total: 100,
 });
-
 const query = ref(cloneDeep(INITIAL_QUERY));
 const dataSource = ref([]);
+const selectedItems = ref([]);
 
 const isNormalStatus = computed(() => tipStatus.value === 1);
 const isAbnormalStatus = computed(() => tipStatus.value === 2);
+const checkedAll = computed(() => selectedItems.value.length === dataSource.value.length);
+const indeterminate = computed(
+  () => selectedItems.value.length > 0 && selectedItems.value.length < dataSource.value.length,
+);
 
 onMounted(() => {
   getData();
 });
 
-const getData = () => {
-  console.log('getData', query.value, pageInfo);
-  dataSource.value = new Array(8).fill({
-    id: 1,
-    name: '全球',
-    account_id: 1,
-    mobile: 1777777,
-    status: 1,
-    platform: 0,
-    operator: {
-      name: '小周',
-    },
-    group: {
-      name: '美团组',
-    },
-    tags: [
-      {
-        name: '标签1',
+const getData = async () => {
+  console.log('getData');
+  // const { page, pageSize } = pageInfo;
+  // const { code, data, total } = await getMediaAccounts({
+  //   page,
+  //   page_size: pageSize,
+  //   ...query.value,
+  // });
+  // if (code === 200) {
+  //   dataSource.value = data.data;
+  //   pageInfo.total = total;
+  // }
+  dataSource.value = [
+    {
+      id: 1,
+      name: '全球',
+      account_id: 1,
+      mobile: 1777777,
+      status: 0,
+      platform: 0,
+      operator: {
+        name: '小周',
       },
-      {
-        name: '标签2',
+      group: {
+        name: '美团组',
       },
-    ],
-  });
+      tags: [
+        {
+          name: '标签1',
+        },
+        {
+          name: '标签2',
+        },
+        {
+          name: '标签3',
+        },
+        {
+          name: '标签4',
+        },
+        {
+          name: '标签5',
+        },
+      ],
+    },
+    {
+      id: 2,
+      name: '全球2',
+      account_id: 1,
+      mobile: 1777777,
+      status: 4,
+      platform: 0,
+      operator: {
+        name: '小周',
+      },
+      group: {
+        name: '美团组',
+      },
+      tags: [
+        {
+          name: '标签1',
+        },
+        {
+          name: '标签2',
+        },
+      ],
+    },
+  ];
 };
-const handleSearch = (newQuery) => {
-  query.value = { ...newQuery };
+const reload = () => {
+  pageInfo.page = 1;
+  getData();
+};
+const handleSearch = () => {
   getData();
 };
 const handleReset = () => {
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
+  selectedItems.value = [];
   query.value = cloneDeep(INITIAL_QUERY);
-  getData();
+  reload();
 };
 
 const onPageChange = (current) => {
@@ -133,8 +224,45 @@ const onPageChange = (current) => {
 };
 const onPageSizeChange = (pageSize) => {
   pageInfo.pageSize = pageSize;
-  pageInfo.page = 1;
-  getData();
+  reload();
+};
+
+const handleOpenGroupModal = () => {
+  groupManageModalRef.value?.open();
+};
+const handleOpenAccountModal = () => {
+  addAccountModalRef.value?.open();
+};
+
+const handleOpenEdit = (item) => {
+  addAccountModalRef.value?.open(item.id);
+};
+
+const handleSelectionChange = (val) => {
+  selectedItems.value = val;
+};
+const handleChangeAll = (val) => {
+  if (val) {
+    selectedItems.value = cloneDeep(dataSource.value);
+  } else {
+    selectedItems.value = [];
+  }
+};
+const handleBatchDelete = () => {
+  const ids = selectedItems.value.map((item) => item.id);
+  const names = selectedItems.value.map((item) => `"${item.name}"`).join(',');
+  deleteAccountRef.value?.open({ id: ids, name: names });
+};
+const handleDelete = (item) => {
+  const { id, name } = item;
+  deleteAccountRef.value?.open({ id, name: `"${name}"` });
+};
+const handleCloseTip = () => {
+  selectedItems.value = [];
+};
+const handleOpenAbnormalAccount = () => {
+  query.value.status = 2;
+  reload();
 };
 </script>
 
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 97d0462..f916046 100644
--- a/src/views/property-marketing/put-account/account-manage/style.scss
+++ b/src/views/property-marketing/put-account/account-manage/style.scss
@@ -13,8 +13,6 @@
     background: var(--BG-white, #fff);
   }
   .filter-wrap {
-    border-radius: 8px;
-    border: 1px solid #e6e6e8;
     .top {
       .title {
         font-family: 'Alibaba PuHuiTi';
@@ -58,6 +56,22 @@
       font-weight: 400;
       line-height: 20px; /* 166.667% */
     }
+    .operation-btn {
+      padding: 0;
+      cursor: pointer;
+      color: var(--Brand-Brand-6, #6d4cfe);
+      font-family: 'Alibaba PuHuiTi';
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px; /* 157.143% */
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+      &.red {
+        color: #F64B31;
+      }
+    }
   }
   .card-wrap {
     display: flex;
@@ -68,39 +82,7 @@
       padding: 16px 24px;
       justify-content: flex-end;
       align-items: center;
-      :deep(.arco-pagination) {
-        .arco-pagination-list {
-          .arco-pagination-item {
-            border-radius: 4px;
-            border: 1px solid var(--BG-300, #e6e6e8);
-            &.arco-pagination-item-ellipsis {
-              border: none;
-            }
 
-            &.arco-pagination-item-active {
-              background-color: transparent;
-              border: 1px solid var(--Brand-Brand-6, #6d4cfe);
-            }
-          }
-        }
-        .arco-pagination-jumper-input {
-          border-radius: 4px;
-          border: 1px solid var(--BG-300, #e6e6e8);
-        }
-        .arco-pagination-jumper-prepend {
-          color: var(--Text-2, #3c4043);
-          text-align: right;
-          font-family: 'Alibaba PuHuiTi';
-          font-size: 14px;
-          font-style: normal;
-          font-weight: 400;
-          line-height: 22px; /* 157.143% */
-        }
-        .arco-select-view-single {
-          border-radius: 4px;
-          border: 1px solid var(--BG-300, #e6e6e8);
-        }
-      }
     }
   }
 }