root/geo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(publish): tighten publish management list layout

Browse Source 
Collapse the hero card into a compact header with inline metrics, and rework the table with denser rows, fixed action column, and tooltip-backed time/title cells so more tasks fit on screen without losing the error popover and platform context.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
liangxu
2026-04-27 12:50:56 +08:00
parent 4d6e6990d4
commit fee16d3ea9
1 changed files with 470 additions and 368 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/desktop-client/src/renderer/views/PublishManagementView.vue
+327 -225
View File
@@ -390,109 +390,109 @@ const historyTotal = computed(() => taskPage.value?.history_total ?? 0);
const totalCount = computed(() => taskPage.value?.total ?? 0); const totalCount = computed(() => taskPage.value?.total ?? 0);
const tableColumns = [ const tableColumns = [
{ title: "文章标题", key: "title", dataIndex: "title", width: 280 }, { title: "文章", key: "title", dataIndex: "title", width: 260, ellipsis: true },
{ title: "账号 / 平台", key: "account", dataIndex: "account", width: 180 }, { title: "账号 / 平台", key: "account", dataIndex: "account", width: 168 },
{ title: "状态", key: "status", dataIndex: "status", width: 130 }, { title: "状态", key: "status", dataIndex: "status", width: 96 },
{ title: "任务信息", key: "meta", dataIndex: "meta", width: 360 }, { title: "任务信息", key: "meta", dataIndex: "meta", width: 280 },
{ title: "时间", key: "time", dataIndex: "time", width: 210 }, { title: "时间", key: "time", dataIndex: "time", width: 132 },
{ title: "操作", key: "actions", align: "right" as const, width: 112 }, { title: "", key: "actions", align: "right" as const, width: 64, fixed: "right" as const },
]; ];
const tableScroll = { x: 1000 } as const;
</script> </script>
<template> <template>
<section class="page-container"> <section class="page-container">
<section class="hero-card"> <header class="page-header">
<div class="hero-header"> <div class="page-header__title">
<div class="hero-title"> <p class="eyebrow">Publish Execution Desk</p>
<p class="eyebrow">PUBLISH EXECUTION DESK</p>
<h2>发布管理</h2> <h2>发布管理</h2>
<p class="summary">
统一用一个 table 查看当前设备负责的待发布队列与已发送历史。页面固定每页 10 条，待发布任务会始终排在最前面，只有当前页的 PublishTasks 展示完后，才会继续补已发送历史记录。
</p>
</div> </div>
<div class="hero-actions"> <div class="page-header__metrics" role="group" aria-label="发布任务概览">
<a-button type="primary" ghost class="modern-btn" :loading="loading" @click="refreshTasks()"> <div class="metric" :class="{ 'metric--accent': pendingCount > 0 }">
<span class="metric__label">等待发布</span>
<span class="metric__value">{{ pendingCount }}</span>
</div>
<div class="metric">
<span class="metric__label">已发送</span>
<span class="metric__value">{{ historyTotal }}</span>
</div>
<div class="metric metric--total">
<span class="metric__label">历史总数</span>
<span class="metric__value">{{ totalCount }}</span>
</div>
</div>
<div class="page-header__actions">
<a-button class="ghost-btn" :loading="loading" @click="refreshTasks()">
<template #icon><ReloadOutlined /></template> <template #icon><ReloadOutlined /></template>
刷新状态 刷新
</a-button> </a-button>
</div> </div>
</div> </header>
<div class="stats-strip">
<div class="stat-card">
<div class="stat-label">历史总数</div>
<div class="stat-value">{{ totalCount }}</div>
</div>
<div class="stat-card">
<div class="stat-label">等待发布</div>
<div class="stat-value">{{ pendingCount }}</div>
</div>
<div class="stat-card">
<div class="stat-label">已发送</div>
<div class="stat-value">{{ historyTotal }}</div>
</div>
</div>
</section>
<!-- Feedback Banners --> <p class="page-summary">
<div v-if="error" class="feedback-banner error"><div class="error-text">{{ error }}</div></div> 待发布任务始终排在最前，每页 10 条；当前页 PublishTasks 展示完后再继续补已发送历史。
</p>
<!-- Table Details Section --> <div v-if="error" class="feedback-banner error">
<section class="content-section"> <div class="error-text">{{ error }}</div>
<div class="hero-card" style="padding-bottom: 0;"> </div>
<div class="hero-header" style="padding: 24px 32px 16px; border-bottom: 1px solid #eef2f6; align-items: center;">
<div style="flex: 1;"> <section class="data-card">
<div class="data-card__toolbar">
<div class="toolbar-meta">
<h3 class="section-title">待发布与已发送记录</h3> <h3 class="section-title">待发布与已发送记录</h3>
<p class="section-desc" style="margin-top: 4px;">支持按文章标题搜索，分页与总数以服务端返回的 PublishTasks 结果为准。</p> <p class="section-desc">分页与总数以服务端返回的 PublishTasks 结果为准。</p>
</div> </div>
<div class="toolbar-filters">
<!-- Filters ToolBar -->
<div style="display: flex; gap: 12px; align-items: center;">
<a-input <a-input
v-model:value="searchTitle" v-model:value="searchTitle"
allow-clear allow-clear
placeholder="搜索文章标题" placeholder="搜索文章标题"
style="width: 280px;" class="search-input"
@pressEnter="applySearch" @pressEnter="applySearch"
> >
<template #prefix> <template #prefix>
<SearchOutlined style="color: #94a3b8" /> <SearchOutlined style="color: #94a3b8" />
</template> </template>
</a-input> </a-input>
<a-button type="primary" class="modern-btn" style="border-radius: 8px; font-weight: 500;" @click="applySearch">搜索</a-button> <a-button type="primary" class="primary-btn" @click="applySearch">搜索</a-button>
</div> </div>
</div> </div>
<a-table <a-table
row-key="id" row-key="id"
class="modern-table publish-table" class="publish-table"
:columns="tableColumns" :columns="tableColumns"
:data-source="publishTasks" :data-source="publishTasks"
:pagination="false" :pagination="false"
:loading="loading" :loading="loading"
:scroll="tableScroll"
:row-class-name="rowClassName" :row-class-name="rowClassName"
> >
<template #emptyText> <template #emptyText>
<div style="padding: 60px; color: #94a3b8;"><a-empty description="暂无匹配的发布任务" /></div> <div class="empty-cell">
<a-empty description="暂无匹配的发布任务" />
</div>
</template> </template>
<template #bodyCell="{ column, record }"> <template #bodyCell="{ column, record }">
<template v-if="column.key === 'title'"> <template v-if="column.key === 'title'">
<div class="cell-primary-secondary">
<div class="info-stack"> <div class="info-stack">
<span class="title">{{ record.title }}</span> <a-tooltip :title="record.title" placement="topLeft">
<span class="subtitle"> <span class="cell-title">{{ record.title }}</span>
<template v-if="record.articleId">文章 #{{ record.articleId }} · </template> </a-tooltip>
{{ isPendingStatus(record.status) ? "待发布队列" : "已发送历史" }} <span class="cell-sub">
<template v-if="record.articleId">#{{ record.articleId }}</template>
<template v-else>未关联文章</template>
</span> </span>
</div> </div>
</div>
</template> </template>
<template v-else-if="column.key === 'account'"> <template v-else-if="column.key === 'account'">
<div class="cell-primary-secondary">
<div class="info-stack"> <div class="info-stack">
<span class="title">{{ record.accountName }}</span> <span class="cell-title cell-title--mono">{{ record.accountName }}</span>
<span class="subtitle platform-line"> <span class="cell-sub platform-line">
<span class="platform-logo-mini"> <span class="platform-logo-mini">
<img <img
v-if="platformLogo(record.platform)" v-if="platformLogo(record.platform)"
@@ -510,19 +510,14 @@ const tableColumns = [
<span>{{ translatePlatform(record.platform) }}</span> <span>{{ translatePlatform(record.platform) }}</span>
</span> </span>
</div> </div>
</div>
</template> </template>
<template v-else-if="column.key === 'status'"> <template v-else-if="column.key === 'status'">
<div class="status-cell">
<StatusBadge :tone="statusTone(record.status)" :label="statusLabel(record.status)" /> <StatusBadge :tone="statusTone(record.status)" :label="statusLabel(record.status)" />
</div>
</template> </template>
<template v-else-if="column.key === 'meta'"> <template v-else-if="column.key === 'meta'">
<div class="cell-primary-secondary meta-cell"> <div class="info-stack meta-cell">
<div class="info-stack">
<span class="subtitle strong-text">{{ record.summary }}</span>
<span v-if="record.errorMessage" class="error-message-row"> <span v-if="record.errorMessage" class="error-message-row">
<a-popover placement="topLeft" overlay-class-name="publish-error-popover" trigger="hover"> <a-popover placement="topLeft" overlay-class-name="publish-error-popover" trigger="hover">
<template #content> <template #content>
@@ -543,11 +538,15 @@ const tableColumns = [
<span class="error-text error-text--truncate">{{ inlineErrorPreview(record.errorMessage) }}</span> <span class="error-text error-text--truncate">{{ inlineErrorPreview(record.errorMessage) }}</span>
</a-popover> </a-popover>
</span> </span>
<span class="subtitle mono-detail"> <span v-else class="cell-sub strong-text">{{ record.summary }}</span>
尝试 {{ record.attempts }} 次 <span class="cell-sub meta-footer">
<template v-if="record.leaseExpiresAt"> · 租约 {{ formatRelativeTime(record.leaseExpiresAt) }} 到期</template> <span class="attempt-chip">尝试 {{ record.attempts }} 次</span>
<template v-if="record.leaseExpiresAt">
<span class="meta-divider">·</span>
<span>租约 {{ formatRelativeTime(record.leaseExpiresAt) }} 到期</span>
</template>
<template v-else-if="record.externalArticleUrl"> <template v-else-if="record.externalArticleUrl">
· <span class="meta-divider">·</span>
<a-tooltip :title="record.externalArticleUrl" overlay-class-name="external-url-tooltip"> <a-tooltip :title="record.externalArticleUrl" overlay-class-name="external-url-tooltip">
<a <a
class="external-task-link" class="external-task-link"
@@ -562,7 +561,7 @@ const tableColumns = [
</a-tooltip> </a-tooltip>
</template> </template>
<template v-else-if="record.externalManageUrl"> <template v-else-if="record.externalManageUrl">
· <span class="meta-divider">·</span>
<a-tooltip :title="`打开 ${record.accountName} 的${translatePlatform(record.platform)}工作台`" overlay-class-name="external-url-tooltip"> <a-tooltip :title="`打开 ${record.accountName} 的${translatePlatform(record.platform)}工作台`" overlay-class-name="external-url-tooltip">
<a <a
class="external-task-link" class="external-task-link"
@@ -579,17 +578,18 @@ const tableColumns = [
</template> </template>
</span> </span>
</div> </div>
</div>
</template> </template>
<template v-else-if="column.key === 'time'"> <template v-else-if="column.key === 'time'">
<div class="cell-primary-secondary"> <a-tooltip
<div class="info-stack"> :title="`创建 ${formatDateTime(record.createdAt)} · 更新 ${formatDateTime(record.updatedAt)}`"
<span class="title mono-text">{{ formatDateTime(record.updatedAt) }}</span> placement="topLeft"
<span class="subtitle">更新于 {{ formatRelativeTime(record.updatedAt) }}</span> >
<span class="subtitle">创建 {{ formatDateTime(record.createdAt) }}</span> <div class="info-stack time-stack">
</div> <span class="cell-title cell-title--mono">{{ formatRelativeTime(record.updatedAt) }}</span>
<span class="cell-sub">{{ formatDateTime(record.updatedAt) }}</span>
</div> </div>
</a-tooltip>
</template> </template>
<template v-else-if="column.key === 'actions'"> <template v-else-if="column.key === 'actions'">
@@ -631,7 +631,6 @@ const tableColumns = [
@change="handlePageChange" @change="handlePageChange"
/> />
</div> </div>
</div>
</section> </section>
</section> </section>
</template> </template>
@@ -640,163 +639,230 @@ const tableColumns = [
.page-container { .page-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 32px; gap: 16px;
padding-bottom: 40px; padding-bottom: 40px;
max-width: 1400px; max-width: 1400px;
} }
/* Hero Section */ /* Header Bar */
.hero-card { .page-header {
background: #ffffff; display: flex;
border-radius: 20px; align-items: center;
border: 1px solid #eef2f6; gap: 20px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -2px rgba(0, 0, 0, 0.01); flex-wrap: wrap;
overflow: hidden;
} }
.hero-header { .page-header__title {
display: flex; display: flex;
justify-content: space-between; flex-direction: column;
align-items: flex-start; gap: 2px;
padding: 36px 40px; min-width: 0;
} }
.eyebrow { .eyebrow {
margin: 0 0 12px; margin: 0;
color: #64748b; color: #94a3b8;
font-size: 13px; font-size: 11px;
font-weight: 700; font-weight: 700;
letter-spacing: 0.1em; letter-spacing: 0.12em;
text-transform: uppercase; text-transform: uppercase;
} }
.hero-title h2 { .page-header__title h2 {
margin: 0; margin: 0;
font-size: 32px; font-size: 22px;
font-weight: 800;
color: #0f172a;
letter-spacing: -0.02em;
}
.summary {
margin: 16px 0 0;
max-width: 800px;
color: #475569;
line-height: 1.6;
font-size: 15px;
}
.modern-btn {
border-radius: 8px;
height: 40px;
padding: 0 20px;
font-weight: 600;
}
/* Stats Strip */
.stats-strip {
display: flex;
padding: 24px 40px;
background: #f8fafc;
border-top: 1px solid #eef2f6;
gap: 40px;
}
.stat-card {
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.stat-label {
font-size: 14px;
font-weight: 500;
color: #64748b;
}
.stat-value {
font-size: 40px;
font-weight: 700; font-weight: 700;
color: #0f172a; color: #0f172a;
line-height: 1; letter-spacing: -0.01em;
line-height: 1.2;
}
.page-header__metrics {
display: flex;
gap: 8px;
margin-left: auto;
flex-wrap: wrap;
}
.metric {
display: flex;
flex-direction: column;
gap: 2px;
align-items: flex-start;
min-width: 76px;
padding: 8px 14px;
border-radius: 10px;
background: #ffffff;
border: 1px solid #e6edf5;
}
.metric--accent {
border-color: #fcd34d;
background: #fffbeb;
}
.metric--total {
background: #f8fafc;
}
.metric__label {
color: #64748b;
font-size: 11px;
font-weight: 500;
}
.metric__value {
color: #0f172a;
font-size: 18px;
font-weight: 700;
line-height: 1.1;
font-feature-settings: "tnum"; font-feature-settings: "tnum";
} }
/* Content Section */ .metric--accent .metric__value {
.content-section { color: #b45309;
}
.page-header__actions {
display: flex;
align-items: center;
}
.ghost-btn {
border-radius: 8px;
height: 36px;
padding: 0 14px;
font-weight: 500;
border-color: #e2e8f0;
color: #475569;
}
.ghost-btn:hover,
.ghost-btn:focus {
border-color: #cbd5e1;
color: #0f172a;
background: #f8fafc;
}
.page-summary {
margin: 0;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
/* Data Card */
.data-card {
background: #ffffff;
border-radius: 16px;
border: 1px solid #eef2f6;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; }
.data-card__toolbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding: 18px 20px;
border-bottom: 1px solid #eef2f6;
flex-wrap: wrap;
}
.toolbar-meta {
flex: 1 1 240px;
min-width: 0;
} }
.section-title { .section-title {
margin: 0; margin: 0;
font-size: 20px; font-size: 15px;
font-weight: 700; font-weight: 700;
color: #0f172a; color: #0f172a;
} }
.section-desc { .section-desc {
margin: 8px 0 0; margin: 4px 0 0;
color: #64748b; color: #64748b;
font-size: 15px; font-size: 12px;
line-height: 1.5; line-height: 1.5;
} }
/* Modern Enterprise Table Styles */ .toolbar-filters {
:deep(.modern-table) { display: flex;
padding: 0 32px; gap: 8px;
align-items: center;
flex-shrink: 0;
} }
:deep(.modern-table .ant-table), .search-input {
:deep(.modern-table .ant-table-container), width: 240px;
:deep(.modern-table .ant-table-content) { border-radius: 8px;
width: 100%;
max-width: 100%;
overflow: hidden;
} }
:deep(.modern-table .ant-table table) { .primary-btn {
width: 100% !important; border-radius: 8px;
table-layout: fixed !important; height: 32px;
padding: 0 16px;
font-weight: 500;
} }
:deep(.modern-table .ant-table-thead > tr > th) { /* Table */
background-color: transparent !important; :deep(.publish-table .ant-table) {
background: transparent;
}
:deep(.publish-table .ant-table-thead > tr > th) {
background-color: #fafbfc !important;
color: #64748b; color: #64748b;
font-weight: 600; font-weight: 600;
font-size: 13px; font-size: 12px;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0;
padding: 16px 12px; padding: 10px 14px;
white-space: nowrap;
} }
:deep(.modern-table .ant-table-tbody > tr > td) { :deep(.publish-table .ant-table-tbody > tr > td) {
padding: 16px 12px; padding: 12px 14px;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;
color: #0f172a; color: #0f172a;
vertical-align: top; vertical-align: middle;
transition: background-color 0.2s ease; transition: background-color 0.15s ease;
font-size: 13px;
} }
:deep(.modern-table .ant-table-tbody > tr:last-child > td) { :deep(.publish-table .ant-table-tbody > tr:last-child > td) {
border-bottom: none; border-bottom: none;
} }
:deep(.modern-table .ant-table-tbody > tr:hover > td) { :deep(.publish-table .ant-table-tbody > tr:hover > td) {
background-color: #f8fafc !important;
}
:deep(.publish-table .ant-table-cell-fix-right) {
background-color: #ffffff !important;
}
:deep(.publish-table .ant-table-tbody > tr:hover > td.ant-table-cell-fix-right) {
background-color: #f8fafc !important; background-color: #f8fafc !important;
} }
:deep(.publish-table .publish-row--pending > td) { :deep(.publish-table .publish-row--pending > td) {
background: #fdfcee !important; background: #fffbeb !important;
} }
.cell-primary-secondary { :deep(.publish-table .publish-row--pending > td.ant-table-cell-fix-right) {
display: flex; background: #fffbeb !important;
flex-direction: column;
min-width: 0;
max-width: 100%;
} }
.empty-cell {
padding: 56px 20px;
color: #94a3b8;
}
/* Cell content */
.info-stack { .info-stack {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -804,24 +870,37 @@ const tableColumns = [
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
} }
.info-stack .title {
.cell-title {
font-weight: 600; font-weight: 600;
color: #0f172a; color: #0f172a;
font-size: 14px;
line-height: 1.5;
}
.info-stack .subtitle {
color: #64748b;
font-size: 13px; font-size: 13px;
line-height: 1.5; line-height: 1.4;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
.info-stack .mono-text {
.cell-title--mono {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-weight: 500;
font-size: 12.5px;
} }
.info-stack .mono-detail {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; .cell-sub {
color: #64748b;
font-size: 12px; font-size: 12px;
color: #94a3b8; line-height: 1.5;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cell-sub.strong-text {
color: #1e293b;
font-weight: 500;
} }
.platform-line { .platform-line {
@@ -829,9 +908,10 @@ const tableColumns = [
align-items: center; align-items: center;
gap: 6px; gap: 6px;
} }
.platform-logo-mini { .platform-logo-mini {
width: 18px; width: 16px;
height: 18px; height: 16px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -841,26 +921,63 @@ const tableColumns = [
overflow: hidden; overflow: hidden;
flex: 0 0 auto; flex: 0 0 auto;
} }
.platform-logo-mini img { .platform-logo-mini img {
width: 14px; width: 12px;
height: 14px; height: 12px;
object-fit: contain; object-fit: contain;
} }
.platform-logo-fallback { .platform-logo-fallback {
font-size: 11px; font-size: 10px;
font-weight: 700; font-weight: 700;
line-height: 1; line-height: 1;
} }
.time-stack {
cursor: default;
}
.meta-cell {
width: 100%;
}
.meta-footer {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
white-space: normal;
font-size: 11.5px;
color: #94a3b8;
}
.attempt-chip {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 6px;
border-radius: 4px;
background: #f1f5f9;
color: #475569;
font-size: 11px;
font-weight: 500;
line-height: 1;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.meta-divider {
color: #cbd5e1;
}
.external-task-link { .external-task-link {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 4px; gap: 4px;
color: #2563eb; color: #2563eb;
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 500;
line-height: 1.5; line-height: 1.4;
text-decoration: none; text-decoration: none;
} }
@@ -869,28 +986,17 @@ const tableColumns = [
text-decoration: underline; text-decoration: underline;
} }
.info-stack .strong-text {
color: #1e293b;
font-weight: 500;
}
.meta-cell {
width: 100%;
min-width: 0;
}
.error-message-row { .error-message-row {
display: block; display: block;
width: 100%; width: 100%;
min-width: 0; min-width: 0;
max-width: 100%; max-width: 100%;
margin-top: 4px;
overflow: hidden; overflow: hidden;
} }
.error-text { .error-text {
color: #ef4444; color: #dc2626;
font-size: 13px; font-size: 12.5px;
font-weight: 500; font-weight: 500;
} }
@@ -913,54 +1019,50 @@ const tableColumns = [
.action-buttons { .action-buttons {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 8px; gap: 4px;
} }
.icon-action-btn { .icon-action-btn {
color: #64748b; color: #64748b;
border-radius: 8px; border-radius: 6px;
transition: all 0.2s ease; transition: all 0.15s ease;
width: 36px; width: 28px;
height: 36px; height: 28px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid transparent; border: 1px solid transparent;
padding: 0;
} }
.icon-action-btn:hover { .icon-action-btn:hover {
background: #f1f5f9; background: #eff6ff;
color: #0ea5e9; color: #2563eb;
border-color: #e2e8f0; border-color: #dbeafe;
} }
.action-placeholder-icon { .action-placeholder-icon {
width: 36px; width: 28px;
height: 36px; height: 28px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: #94a3b8; color: #cbd5e1;
font-size: 16px; font-size: 14px;
} }
.table-footer { .table-footer {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: flex-end;
padding: 16px 32px 32px; padding: 12px 20px;
border-top: 1px solid #eef2f6; border-top: 1px solid #eef2f6;
background: transparent; background: transparent;
} }
.table-note {
color: #94a3b8;
font-size: 13px;
}
.feedback-banner { .feedback-banner {
padding: 16px 20px; padding: 12px 16px;
border-radius: 12px; border-radius: 10px;
background: #fff; background: #fff;
border: 1px solid transparent; border: 1px solid transparent;
} }