From cfd86b1408f4fcef72c5bf8d7447fb921ab11874 Mon Sep 17 00:00:00 2001
From: rd <>
Date: Sat, 28 Jun 2025 15:28:54 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B4=A6=E5=8F=B7=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E7=9C=8B=E6=9D=BF=E3=80=81=E8=B4=A6=E6=88=B7=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E3=80=81=E6=8A=95=E6=94=BE=E6=95=B0=E6=8D=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../routes/modules/propertyMarketing.ts       |   6 +-
 src/styles/components/index.scss              |   3 +-
 src/styles/components/pagination.scss         |   4 +-
 src/styles/components/tabs.scss               |  29 +++
 src/utils/tools.ts                            |  11 +
 .../components/account-table/constants.ts     |   4 +-
 .../components/account-table/index.vue        |  21 +-
 .../media-account/account-dashboard/index.vue |  15 +-
 .../components/account-info/index.vue         | 139 ++++++++++
 .../components/account-info/style.scss        |   3 +
 .../components/note-table/constants.ts        |  73 ++++++
 .../components/note-table/index.vue           | 158 +++++++++++
 .../components/note-table/style.scss          |  44 ++++
 .../media-account/account-detail/constants.ts |  23 ++
 .../media-account/account-detail/index.vue    |  28 +-
 .../media-account/account-detail/style.scss   |  40 +++
 .../components/account-table/style.scss       |   2 +-
 .../media-account/account-manage/index.vue    |   6 +-
 .../media-account/account-manage/style.scss   |   2 -
 .../components/account-table/constants.ts     | 239 +++++++++++++++++
 .../components/account-table/index.vue        | 213 +++++++++++++++
 .../components/account-table/style.scss       |  63 +++++
 .../components/filter-block/index.vue         | 123 +++++++++
 .../components/filter-block/style.scss        |  37 +++
 .../components/group-select/index.vue         |  64 +++++
 .../put-account/account-data/constants.ts     |  65 +++++
 .../put-account/account-data/index.vue        | 245 ++++++++++++++++++
 .../put-account/account-data/style.scss       |  58 +++++
 28 files changed, 1684 insertions(+), 34 deletions(-)
 create mode 100644 src/styles/components/tabs.scss
 create mode 100644 src/views/property-marketing/media-account/account-detail/components/account-info/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-detail/components/account-info/style.scss
 create mode 100644 src/views/property-marketing/media-account/account-detail/components/note-table/constants.ts
 create mode 100644 src/views/property-marketing/media-account/account-detail/components/note-table/index.vue
 create mode 100644 src/views/property-marketing/media-account/account-detail/components/note-table/style.scss
 create mode 100644 src/views/property-marketing/media-account/account-detail/constants.ts
 create mode 100644 src/views/property-marketing/put-account/account-data/components/account-table/constants.ts
 create mode 100644 src/views/property-marketing/put-account/account-data/components/account-table/index.vue
 create mode 100644 src/views/property-marketing/put-account/account-data/components/account-table/style.scss
 create mode 100644 src/views/property-marketing/put-account/account-data/components/filter-block/index.vue
 create mode 100644 src/views/property-marketing/put-account/account-data/components/filter-block/style.scss
 create mode 100644 src/views/property-marketing/put-account/account-data/components/group-select/index.vue
 create mode 100644 src/views/property-marketing/put-account/account-data/constants.ts
 create mode 100644 src/views/property-marketing/put-account/account-data/index.vue
 create mode 100644 src/views/property-marketing/put-account/account-data/style.scss

diff --git a/src/router/routes/modules/propertyMarketing.ts b/src/router/routes/modules/propertyMarketing.ts
index a3f8edf..e7636ba 100644
--- a/src/router/routes/modules/propertyMarketing.ts
+++ b/src/router/routes/modules/propertyMarketing.ts
@@ -93,7 +93,7 @@ const COMPONENTS: AppRouteRecordRaw[] = [
     },
     children: [
       {
-        path: 'accountManagement',
+        path: 'manage',
         name: 'PutAccountAccountManagement',
         meta: {
           locale: '账号管理',
@@ -103,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: 'accountDashboard',
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
index 746da5b..4655cb9 100644
--- a/src/styles/components/index.scss
+++ b/src/styles/components/index.scss
@@ -1,4 +1,5 @@
 @import './input.scss';
 @import './table.scss';
 @import './checkbox.scss';
-@import './pagination.scss';
\ No newline at end of file
+@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
index 5ac8023..d0fa4f8 100644
--- a/src/styles/components/pagination.scss
+++ b/src/styles/components/pagination.scss
@@ -3,11 +3,11 @@
     .arco-pagination-item {
       border-radius: 4px;
       border: 1px solid var(--BG-300, #e6e6e8);
-      &.arco-pagination-item-ellipsis {
+      &-ellipsis {
         border: none;
       }
 
-      &.arco-pagination-item-active {
+      &-active {
         background-color: transparent;
         border: 1px solid var(--Brand-Brand-6, #6d4cfe);
       }
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/utils/tools.ts b/src/utils/tools.ts
index b38731a..256ec57 100644
--- a/src/utils/tools.ts
+++ b/src/utils/tools.ts
@@ -2,6 +2,8 @@
  * @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));
 }
@@ -82,3 +84,12 @@ export function formatTableField(fieldItem: any, rowValue: any, showExactValue =
 
   return `${fieldItem.prefix || ''}${value}${fieldItem.suffix || ''}`;
 }
+
+export function exactFormatTime(val: number, curYearFmt = 'MM-DD HH:mm', otherYearFmt = 'YYYY-MM-DD HH:mm') {
+  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/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
index d9fd2f9..48b93fb 100644
--- 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
@@ -2,7 +2,7 @@
  * @Author: RenXiaoDong
  * @Date: 2025-06-28 10:33:06
  */
-export const tableColumns = [
+export const TABLE_COLUMNS = [
   {
     title: '账号名称',
     dataIndex: 'name',
@@ -147,7 +147,7 @@ export const tableColumns = [
   {
     title: '操作',
     dataIndex: 'operation',
-    width: 120,
+    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
index 57f3e16..00a60a2 100644
--- a/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/components/account-table/index.vue
@@ -4,7 +4,9 @@
 -->
 <template>
   <div class="action-row mb-12px flex justify-between">
-    <a-checkbox :model-value="checkedAll" :indeterminate="indeterminate" @change="handleSelectAll">全选</a-checkbox>
+    <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>
@@ -20,6 +22,7 @@
   </div>
 
   <a-table
+    ref="tableRef"
     :data="dataSource"
     row-key="id"
     :row-selection="rowSelection"
@@ -34,7 +37,7 @@
   >
     <template #columns>
       <a-table-column
-        v-for="column in tableColumns"
+        v-for="column in TABLE_COLUMNS"
         :key="column.dataIndex"
         :data-index="column.dataIndex"
         :fixed="column.fixed"
@@ -82,7 +85,7 @@
           </div>
         </template>
         <template v-else-if="column.dataIndex === 'operation'" #cell="{ record }">
-          <a-button type="outline" size="small" @click="handleDetail(record)">详情</a-button>
+          <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 }">
@@ -109,7 +112,7 @@
 import { ref, computed } from 'vue';
 import { STATUS_LIST } from '../../constants';
 import { formatTableField } from '@/utils/tools';
-import { tableColumns } from './constants';
+import { TABLE_COLUMNS } from './constants';
 import { useRouter } from 'vue-router';
 
 import icon1 from '@/assets/img/media-account/icon-custom.png';
@@ -130,6 +133,7 @@ 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,
@@ -169,6 +173,15 @@ const handleSelect = (selectedRowKeys, selectedRows) => {
 const handleExport = () => {
   emit('export');
 };
+
+const resetTable = () => {
+  selectedItems.value = [];
+  tableRef.value?.clearSorters();
+};
+
+defineExpose({
+  resetTable,
+});
 </script>
 
 <style scoped lang="scss">
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 6bbb143..74a3731 100644
--- a/src/views/property-marketing/media-account/account-dashboard/index.vue
+++ b/src/views/property-marketing/media-account/account-dashboard/index.vue
@@ -5,7 +5,7 @@
 
 <template>
   <div class="account-dashboard-wrap">
-    <div class="filter-wrap bg-#fff border-radius-8px px-24px pb-20px mb-16px">
+    <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>
@@ -29,11 +29,14 @@
         </div>
       </div>
     </div>
-    <div class="filter-wrap bg-#fff border-radius-8px px-24px py-24px mb-16px">
+    <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 border-radius-8px px-24px py-24px flex-1">
+    <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"
@@ -72,6 +75,7 @@ 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,
@@ -280,7 +284,12 @@ const reload = () => {
 };
 
 const handleReset = () => {
+  selectedRowKeys.value = [];
+  pageInfo.page = 1;
+  pageInfo.pageSize = 20;
+  pageInfo.total = 0;
   query.value = cloneDeep(INITIAL_QUERY);
+  accountTableRef.value?.resetTable();
   reload();
 };
 
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
index 40fd2bf..d40f532 100644
--- a/src/views/property-marketing/media-account/account-detail/index.vue
+++ b/src/views/property-marketing/media-account/account-detail/index.vue
@@ -3,28 +3,26 @@
  * @Date: 2025-06-28 11:21:10
 -->
 <template>
-  <div>
-    <h1>账号详情</h1>
+  <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 { getAccountBoardDetail } from '@/api/all/propertyMarketing';
+import AccountInfo from './components/account-info';
+import NoteTable from './components/note-table';
+import { useRouter } from 'vue-router';
 
-const route = useRoute();
-const id = route.params.id;
-const detailData = ref({});
+const router = useRouter();
 
-const getDetail = async () => {
-  const { code, data } = await getAccountBoardDetail(id);
-  if (code === 200) {
-    detailData.value = data;
-  }
+const handleBack = () => {
+  router.push('/media-account/dashboard');
 };
-
-onMounted(() => {
-  getDetail();
-});
 </script>
 
 <style scoped lang="scss">
diff --git a/src/views/property-marketing/media-account/account-detail/style.scss b/src/views/property-marketing/media-account/account-detail/style.scss
index e69de29..387d967 100644
--- a/src/views/property-marketing/media-account/account-detail/style.scss
+++ 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/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 9258844..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';
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