修改表格组件，优化直播页面布局

apps/web-vue/src/components/Table/indedx.vue

@@ -99,7 +99,6 @@ const handleCurrentChange = (val: number) => {
 
 // 6. 处理多选变化
 const handleSelectionChange = (selection: any[]) => {
-    console.log(3333, selection)
     emit('selection-change', selection);
 };
 
@@ -125,12 +124,11 @@ defineExpose({
 
 :deep(.el-table__header) {
     thead {
-        height: 40px;
+        th{
+            padding: 10px 0;
+            background: #f8f8f8 !important;
+        }
     }
-}
-:deep(.el-table) {
-    box-shadow: 0 0 0 1px #eee;
-    border-radius: 10px;
 }
 
 .pagination-container {

apps/web-vue/src/views/zhibo/index.vue

@@ -5,8 +5,10 @@
                 <h2 class="fs-16 color-000">直播账号总览</h2>
                 <p class="mt-4 color-888 fs-12">查看所有已绑定直播号的点赞、消耗与经营表现</p>
             </div>
-            <el-button type="primary" class="h-36 px-20" @click="bindVisible = true">
-                <el-icon class="mr-6"><Link /></el-icon>
+            <el-button type="primary" color="#4854ff" class="h-36 px-20" @click="bindVisible = true">
+                <el-icon class="mr-6">
+                    <Link />
+                </el-icon>
                 绑定直播号
             </el-button>
         </section>
@@ -19,12 +21,15 @@
         </section>
 
         <el-card class="mt-16 bg-fff round-8 account-table-wrap hidden" shadow="never">
-            <SeTable :data-list="accounts" class="account-table" :total="accounts.length" :default-page-size="50" size="default" @update:page="handlePageChange">
+            <SeTable :data-list="accounts" class="account-table" :total="accounts.length" :default-page-size="50"
+                size="default" @update:page="handlePageChange">
                 <el-table-column label="直播账号" min-width="300">
                     <template #default="{ row }">
                         <div class="flex-items-center minw-0">
                             <div class="live-icon flex-center wh-40 round-8 color-fff mr-14">
-                                <el-icon><VideoCamera /></el-icon>
+                                <el-icon>
+                                    <VideoCamera />
+                                </el-icon>
                             </div>
                             <div class="minw-0">
                                 <div class="font-bold color-000 ellipsis">{{ row.name }}</div>
@@ -61,22 +66,29 @@
                 </el-table-column>
                 <el-table-column label="状态" min-width="140">
                     <template #default="{ row }">
-                        <span class="status-tag px-12 py-2 round-20 font-bold fs-12" :class="getStatusClass(row.status)">
+                        <span class="status-tag px-12 py-2 round-20 font-bold fs-12"
+                            :class="getStatusClass(row.status)">
                             {{ row.status }}
                         </span>
                     </template>
                 </el-table-column>
-                <el-table-column label="操作" min-width="190" align="center">
+                <el-table-column label="操作" min-width="150">
                     <template #default="{ row }">
-                        <div class="flex-center gap-8">
+                        <div class="flex">
                             <el-button class="w-34 h-34 p-0" @click="openDetail(row)">
-                                <el-icon><View /></el-icon>
+                                <el-icon>
+                                    <View />
+                                </el-icon>
                             </el-button>
                             <el-button v-if="row.canSync" class="w-34 h-34 p-0" @click="syncAccount(row)">
-                                <el-icon><Refresh /></el-icon>
+                                <el-icon>
+                                    <Refresh />
+                                </el-icon>
                             </el-button>
                             <el-button class="w-34 h-34 p-0" @click="removeAccount(row)">
-                                <el-icon><Delete /></el-icon>
+                                <el-icon>
+                                    <Delete />
+                                </el-icon>
                             </el-button>
                         </div>
                     </template>
@@ -123,13 +135,17 @@
                 <div v-if="currentAccount" class="detail-panel pt-4">
                     <div class="flex-items-center mb-20 px-24 pt-24">
                         <div class="live-icon flex-center wh-44 round-8 color-fff mr-14">
-                        <el-icon><VideoCamera /></el-icon>
+                            <el-icon>
+                                <VideoCamera />
+                            </el-icon>
                         </div>
                         <div class="minw-0">
                             <div class="font-bold fs-16 color-000">{{ currentAccount.name }}</div>
-                        <div class="fs-12 color-8aa mt-4">@{{ currentAccount.handle }} · {{ currentAccount.lastSync }}</div>
+                            <div class="fs-12 color-8aa mt-4">@{{ currentAccount.handle }} · {{ currentAccount.lastSync
+                            }}</div>
                         </div>
-                    <span class="status-tag px-12 py-6 round-20 font-bold fs-12 ml-18" :class="getStatusClass(currentAccount.status)">
+                        <span class="status-tag px-12 py-6 round-20 font-bold fs-12 ml-18"
+                            :class="getStatusClass(currentAccount.status)">
                             {{ currentAccount.status }}
                         </span>
                     </div>
@@ -142,8 +158,9 @@
                     </div>
 
                     <div class="font-bold color-000 mb-12 px-24">直播间销量与销售额</div>
-                <div class="px-24">
-                <SeTable :data-list="currentAccount.roomsData" class="detail-room-table" :total="currentAccount.roomsData.length" :default-page-size="10" size="default">
+                    <div class="px-24 pb-20">
+                        <SeTable :data-list="currentAccount.roomsData" :total="currentAccount.roomsData.length"
+                            :default-page-size="10" size="default">
                             <el-table-column prop="room" label="直播间" min-width="170" />
                             <el-table-column prop="host" label="主播" min-width="120" />
                             <el-table-column prop="sales" label="销量" min-width="100" />
@@ -159,7 +176,8 @@
                             </el-table-column>
                             <el-table-column prop="status" label="状态" min-width="120">
                                 <template #default="{ row }">
-                            <span class="room-status px-10 py-2 round-20 font-bold fs-12" :class="row.status === '直播中' ? 'live' : 'ended'">
+                                    <span class="room-status px-10 py-2 round-20 font-bold fs-12"
+                                        :class="row.status === '直播中' ? 'live' : 'ended'">
                                         {{ row.status }}
                                     </span>
                                 </template>
@@ -167,7 +185,7 @@
                         </SeTable>
                     </div>
                 </div>
-                <div class="dialog-footer flex justify-end p-24">
+                <div class="dialog-footer flex justify-end px-24 py-16">
                     <el-button type="primary" class="w-64" @click="detailVisible = false">关闭</el-button>
                 </div>
             </div>
@@ -426,18 +444,6 @@ const handlePageChange = () => {
     border: 1px solid #dfe7f2;
 }
 
-.detail-room-table {
-    border: 1px solid #dfe7f2;
-    border-radius: 8px;
-    overflow: hidden;
-
-    :deep(.el-table__header th) {
-        background: #f8fbff;
-        color: #8aa0bf;
-        font-weight: 700;
-    }
-}
-
 .room-status {
     display: inline-block;
 
@@ -478,5 +484,4 @@ const handlePageChange = () => {
     border-top: none;
     border-bottom: 1px solid #edf0f5;
 }
-
 </style>