feat: 账号数据看板、账户详情、投放数据

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',
   },
 ];

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">

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();
 };