linkong/planet
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix: stabilize bgp overview table viewport

Browse Source
This commit is contained in:
linkong
2026-04-08 17:48:32 +08:00
parent c8fe8cad59
commit 5639546990
7 changed files with 141 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "planet-frontend",
"version": "0.23.3",
"version": "0.23.4",
"private": true,
"dependencies": {
"@ant-design/icons": "^5.2.6",

95
frontend/src/index.css
View File

@@ -495,16 +495,24 @@ body {
gap: 10px;
}
.bgp-page__body > .ant-space {
.bgp-page__body > .ant-space,
.bgp-page__stack {
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
min-width: 0;
min-height: 0;
}
.bgp-page__body > .ant-space > .ant-space-item:last-child {
.bgp-page__stack > .ant-space-item:first-child,
.bgp-page__stack > .ant-space-item:nth-child(2) {
flex: 0 0 auto;
}
.bgp-page__stack > .ant-space-item:last-child {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
display: flex;
}
@@ -549,21 +557,56 @@ body {
line-height: 1;
}
.bgp-page__summary-grid--compact {
flex-wrap: nowrap !important;
overflow-x: auto;
overflow-y: hidden;
padding-bottom: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(148, 163, 184, 0.82) transparent;
}
.bgp-page__summary-grid--compact::-webkit-scrollbar {
width: 8px;
height: 8px;
}
.bgp-page__summary-grid--compact::-webkit-scrollbar-thumb {
background: rgba(148, 163, 184, 0.82);
border-radius: 999px;
border: 2px solid transparent;
background-clip: padding-box;
}
.bgp-page__summary-grid--compact::-webkit-scrollbar-track {
background: transparent;
}
.bgp-page__table-card,
.bgp-page__table-card .ant-card-body {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
}
.bgp-page__table-card {
flex: 1 1 55%;
min-height: 55%;
}
.bgp-page__table-card .ant-card-body {
display: flex;
flex-direction: column;
padding: 10px 12px;
overflow: hidden;
}
.bgp-page__table-region {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
}
@@ -571,7 +614,9 @@ body {
.bgp-page__tabs .ant-tabs-content-holder,
.bgp-page__tabs .ant-tabs-content,
.bgp-page__tabs .ant-tabs-tabpane {
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
}
@@ -587,16 +632,50 @@ body {
.bgp-page__tabs .ant-tabs-content-holder {
flex: 1 1 auto;
overflow: hidden;
}
.bgp-page__tabs .ant-tabs-tabpane {
display: flex;
flex-direction: column;
overflow: hidden;
}
.bgp-page__tabs .ant-table-wrapper {
flex: 1 1 auto;
min-width: 0;
min-height: 0;
width: 100%;
}
.bgp-page__tabs .ant-spin-nested-loading,
.bgp-page__tabs .ant-spin-container,
.bgp-page__tabs .ant-table,
.bgp-page__tabs .ant-table-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
min-height: 0;
width: 100%;
height: 100%;
}
.bgp-page__tabs .ant-table-container,
.bgp-page__tabs .ant-table-content,
.bgp-page__tabs .ant-table-body {
overflow-x: auto !important;
}
.bgp-page__tabs .ant-table-header {
flex: 0 0 auto;
}
.bgp-page__tabs .ant-table-body {
flex: 1 1 auto;
min-height: 0;
height: 0 !important;
max-height: none !important;
}
.bgp-page--compact .page-shell__body {
@@ -612,21 +691,21 @@ body {
}
.bgp-page--compact .bgp-page__summary-card .ant-card-body {
padding: 8px 10px;
padding: 10px 12px;
}
.bgp-page--compact .bgp-page__summary-item {
min-height: 56px;
padding: 6px 8px;
min-height: 64px;
padding: 8px 10px;
}
.bgp-page--compact .bgp-page__summary-label {
margin-bottom: 2px;
font-size: 11px;
margin-bottom: 4px;
font-size: 12px;
}
.bgp-page--compact .bgp-page__summary-stat .ant-statistic-content {
font-size: 20px;
font-size: 24px;
}
.bgp-page--compact .bgp-page__table-card .ant-card-body {

42
frontend/src/pages/BGP/BGP.tsx
View File

@@ -65,7 +65,7 @@ function BGP() {
useEffect(() => {
const updateViewportMode = () => {
if (typeof window === 'undefined') return
const compact = window.devicePixelRatio >= 1.5 || window.innerHeight <= 860 || window.innerWidth <= 1440
const compact = window.innerHeight <= 860 || window.innerWidth <= 1440
setCompactViewport(compact)
}
@@ -112,7 +112,12 @@ function BGP() {
</div>
<div className="page-shell__body bgp-page__body">
<Space direction="vertical" size={compactViewport ? 12 : 16} style={{ width: '100%' }}>
<Space
className="bgp-page__stack"
direction="vertical"
size={compactViewport ? 12 : 16}
style={{ width: '100%' }}
>
<Alert
className="bgp-page__alert"
type="info"
@@ -121,9 +126,19 @@ function BGP() {
/>
<Card className="bgp-page__summary-card">
<Row gutter={[compactViewport ? 8 : 12, compactViewport ? 8 : 12]} className="bgp-page__summary-grid">
<Row
gutter={[compactViewport ? 8 : 12, compactViewport ? 8 : 12]}
className={`bgp-page__summary-grid${compactViewport ? ' bgp-page__summary-grid--compact' : ''}`}
wrap={!compactViewport}
>
{summaryItems.map((item) => (
<Col key={item.label} xs={8} sm={8} md={4}>
<Col
key={item.label}
xs={24}
sm={12}
md={8}
flex={compactViewport ? '180px' : undefined}
>
<div className="bgp-page__summary-item">
<div className="bgp-page__summary-label">{item.label}</div>
<Statistic className="bgp-page__summary-stat" value={item.value} />
@@ -146,8 +161,8 @@ function BGP() {
rowKey="collector"
loading={loading}
dataSource={collectors}
pagination={{ pageSize: compactViewport ? 6 : 8 }}
scroll={{ x: 'max-content', y: tableHeight }}
pagination={false}
scroll={{ x: 1240, y: tableHeight }}
tableLayout="fixed"
columns={[
{
@@ -191,6 +206,7 @@ function BGP() {
{
title: '日常覆盖范围',
dataIndex: 'baseline_scope',
width: 280,
render: (value: BGPCollectorCoverage['baseline_scope']) => {
const cities = value?.cities?.slice(0, 3).join(' / ') || ''
const countries = value?.countries?.slice(0, 3).join(' / ') || ''
@@ -209,8 +225,8 @@ function BGP() {
rowKey="id"
loading={loading}
dataSource={incidents}
pagination={{ pageSize: compactViewport ? 6 : 8 }}
scroll={{ x: 'max-content', y: tableHeight }}
pagination={false}
scroll={{ x: 1660, y: tableHeight }}
tableLayout="fixed"
columns={[
{
@@ -280,6 +296,7 @@ function BGP() {
{
title: '摘要',
dataIndex: 'summary',
width: 320,
},
]}
/>
@@ -293,8 +310,8 @@ function BGP() {
rowKey="id"
loading={loading}
dataSource={anomalies}
pagination={{ pageSize: compactViewport ? 8 : 10 }}
scroll={{ x: 'max-content', y: tableHeight }}
pagination={false}
scroll={{ x: 1380, y: tableHeight }}
tableLayout="fixed"
columns={[
{
@@ -348,6 +365,7 @@ function BGP() {
{
title: '摘要',
dataIndex: 'summary',
width: 320,
},
]}
/>
@@ -361,8 +379,8 @@ function BGP() {
rowKey="id"
loading={loading}
dataSource={events}
pagination={{ pageSize: compactViewport ? 6 : 8 }}
scroll={{ x: 'max-content', y: tableHeight }}
pagination={false}
scroll={{ x: 980, y: tableHeight }}
tableLayout="fixed"
columns={[
{