fix: stabilize bgp overview table viewport

2026-04-08 17:48:32 +08:00
parent c8fe8cad59
commit 5639546990
7 changed files with 141 additions and 24 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-0.23.3
+0.23.4
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -7,6 +7,26 @@ This project follows the repository versioning rule:
 - `feature` -> `+0.1.0`
 - `bugfix` -> `+0.0.1`

+## 0.23.4
+
+Released: 2026-04-08
+
+### Highlights
+
+- Fixed the BGP overview workspace so summary cards and tabular data now share viewport space more predictably, keeping the table header visible while preserving internal horizontal and vertical scrolling.
+
+### Improved
+
+- Improved [BGP.tsx](/home/ray/dev/linkong/planet/frontend/src/pages/BGP/BGP.tsx) by switching BGP tables from frontend pagination to in-table scrolling, setting explicit horizontal scroll baselines per tab, and reshaping the summary cards into a desktop two-row layout with a compact single-row horizontal strip on tighter screens.
+- Improved [index.css](/home/ray/dev/linkong/planet/frontend/src/index.css) by hardening the BGP table layout chain from card body to Ant Design table body, so width overflow stays inside the table region and compact summary cards no longer consume unnecessary vertical space above the workspace.
+- Improved release consistency by aligning [VERSION](/home/ray/dev/linkong/planet/VERSION), [pyproject.toml](/home/ray/dev/linkong/planet/pyproject.toml), [frontend/package.json](/home/ray/dev/linkong/planet/frontend/package.json), and [uv.lock](/home/ray/dev/linkong/planet/uv.lock) on the same `0.23.4` bugfix version.
+
+### Fixed
+
+- Fixed the BGP collector/events tables so shrinking the browser window no longer clips the table card frame without exposing a usable horizontal scrollbar.
+- Fixed the BGP table region so the Ant Design header row is no longer obscured by an overgrown table body after the page switched to full-height internal scrolling.
+- Fixed the BGP summary area so medium and large screens no longer collapse the six KPI cards into overly narrow single-row tiles.
+
 ## 0.23.3

 Released: 2026-04-08
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "planet-frontend",
-  "version": "0.23.3",
+  "version": "0.23.4",
  "private": true,
  "dependencies": {
    "@ant-design/icons": "^5.2.6",
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -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 {
--- a/frontend/src/pages/BGP/BGP.tsx
+++ b/frontend/src/pages/BGP/BGP.tsx
@@ -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={[
                            {
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "planet"
-version = "0.23.2"
+version = "0.23.4"
 description = "智能星球计划 - 态势感知系统"
 requires-python = ">=3.14"
 dependencies = [
--- a/uv.lock
+++ b/uv.lock
@@ -475,7 +475,7 @@ wheels = [

 [[package]]
 name = "planet"
-version = "0.23.2"
+version = "0.23.4"
 source = { virtual = "." }
 dependencies = [
    { name = "aiofiles" },
@@ -1 +1 @@
 .23.3
 .23.4