fix: move bgp brief markdown into a modal workspace

2026-04-10 03:57:13 +08:00
parent fbb6adfbf5
commit 60f5ff9bab
8 changed files with 135 additions and 26 deletions
--- a/2
+++ b/2
@@ -1 +1 @@
-0.24.7
+0.24.8
--- a/docs/CHANGELOG.md
+++ b/docs/CHANGELOG.md
@@ -7,6 +7,22 @@ This project follows the repository versioning rule:
 - `feature` -> `+0.1.0`
 - `bugfix` -> `+0.0.1`

+## 0.24.8
+
+Released: 2026-04-10
+
+### Highlights
+
+- Refined the BGP AI brief operator workflow so the tab now stays compact and metadata-focused, while the full Markdown brief opens in a bounded modal that respects the repo’s single-screen layout rules.
+
+### Improved
+
+- Improved [frontend/src/pages/BGP/BGP.tsx](/home/ray/dev/linkong/planet/frontend/src/pages/BGP/BGP.tsx) by turning the brief action row into a clearer `历史简报下拉框 + 查看 + 生成` flow, keeping inline metadata visible in the tab while moving full Markdown reading into a dedicated modal workspace.
+
+### Fixed
+
+- Fixed [frontend/src/index.css](/home/ray/dev/linkong/planet/frontend/src/index.css) and [frontend/src/pages/BGP/BGP.tsx](/home/ray/dev/linkong/planet/frontend/src/pages/BGP/BGP.tsx) so the BGP brief modal no longer spills below the viewport; long brief content now scrolls inside the modal body instead of extending past the visible screen.
+
 ## 0.24.7

 Released: 2026-04-10
--- a/docs/version-history.md
+++ b/docs/version-history.md
@@ -16,7 +16,7 @@
 ## Current Version

 - `main` 当前主线历史推导到：`0.16.5`
- `dev` 当前开发分支历史推导到：`0.24.7`
+- `dev` 当前开发分支历史推导到：`0.24.8`

 ## Timeline

@@ -80,6 +80,7 @@
 | `0.24.5` | bugfix | `dev` | `pending` | add persistent BGP AI briefs with Markdown history, lazy-load BGP tabs, and move BGP hot-path filtering and aggregation back into the database |
 | `0.24.6` | bugfix | `dev` | `pending` | batch datasource and visualization hot-path queries, fix BGP collector JSON extraction, and rebuild the BGP AI brief tab layout and markdown rendering |
 | `0.24.7` | bugfix | `dev` | `pending` | formalize release workflow and frontend layout constraints with repo rules and a reusable release skill |
+| `0.24.8` | bugfix | `dev` | `pending` | move BGP brief markdown into a dedicated modal, keep tab content metadata-focused, and constrain modal scrolling to the viewport |

 ## Maintenance Commits Not Counted as Version Bumps

--- a/frontend/package.json
+++ b/frontend/package.json
@@ -1,6 +1,6 @@
 {
  "name": "planet-frontend",
-  "version": "0.24.7",
+  "version": "0.24.8",
  "private": true,
  "packageManager": "bun@1",
  "dependencies": {
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -1038,15 +1038,6 @@ body {
  gap: 12px;
 }

-.bgp-page__brief-content {
-  min-height: 360px;
-  overflow: visible;
-  padding: 14px 16px;
-  border-radius: 14px;
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 248, 251, 0.98));
-  border: 1px solid rgba(5, 5, 5, 0.08);
-}
-
 .bgp-page__brief-head {
  display: flex;
  align-items: flex-start;
@@ -1058,10 +1049,20 @@ body {
  display: flex;
  align-items: center;
  gap: 12px;
+  margin-left: auto;
+  min-width: 0;
 }

 .bgp-page__brief-select {
-  min-width: 260px;
+  width: 320px;
+  min-width: 240px;
+}
+
+.bgp-page__brief-buttons {
+  display: flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 12px;
 }

 .bgp-page__brief-subtitle {
@@ -1071,6 +1072,22 @@ body {
  line-height: 1.5;
 }

+@media (max-width: 960px) {
+  .bgp-page__brief-head {
+    flex-direction: column;
+  }
+
+  .bgp-page__brief-actions {
+    width: 100%;
+    margin-left: 0;
+  }
+
+  .bgp-page__brief-select {
+    flex: 1 1 auto;
+    width: auto;
+  }
+}
+
 .bgp-page__brief-loading,
 .bgp-page__brief-empty {
  min-height: 72px;
@@ -1089,6 +1106,54 @@ body {
  padding: 8px 12px;
 }

+.bgp-page__brief-modal-body {
+  max-height: calc(100vh - 180px);
+  overflow: auto;
+  padding-right: 6px;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(148, 163, 184, 0.88) transparent;
+}
+
+.bgp-page__brief-modal {
+  max-width: min(920px, calc(100vw - 32px));
+}
+
+.bgp-page__brief-modal .ant-modal-content {
+  max-height: calc(100vh - 48px);
+  overflow: hidden;
+}
+
+.bgp-page__brief-modal .ant-modal-body {
+  overflow: hidden;
+}
+
+.bgp-page__brief-modal-body::-webkit-scrollbar {
+  width: 8px;
+}
+
+.bgp-page__brief-modal-body::-webkit-scrollbar-thumb {
+  border-radius: 999px;
+  background: rgba(148, 163, 184, 0.88);
+}
+
+.bgp-page__brief-modal-body::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+@media (max-width: 768px) {
+  .bgp-page__brief-modal {
+    max-width: calc(100vw - 20px);
+  }
+
+  .bgp-page__brief-modal .ant-modal-content {
+    max-height: calc(100vh - 20px);
+  }
+
+  .bgp-page__brief-modal-body {
+    max-height: calc(100vh - 156px);
+  }
+}
+
 .markdown-renderer {
  color: #262626;
  font-size: 13px;
--- a/frontend/src/pages/BGP/BGP.tsx
+++ b/frontend/src/pages/BGP/BGP.tsx
@@ -6,6 +6,7 @@ import {
  Card,
  Col,
  Descriptions,
+  Modal,
  Row,
  Select,
  Space,
@@ -343,6 +344,7 @@ function BGP() {
  const [briefOptions, setBriefOptions] = useState<BGPBriefRecordSummary[]>([])
  const [selectedBriefId, setSelectedBriefId] = useState<string | null>(null)
  const [briefListLoaded, setBriefListLoaded] = useState(false)
+  const [briefModalOpen, setBriefModalOpen] = useState(false)
  const tableRegionRef = useRef<HTMLDivElement | null>(null)

  useEffect(() => {
@@ -537,14 +539,22 @@ function BGP() {
              onChange={(value) => void handleBriefSelectionChange(value)}
              disabled={briefLoading || briefDetailLoading || briefOptions.length === 0}
            />
-            <Button
-              type="primary"
-              icon={<ReloadOutlined />}
-              loading={briefLoading}
-              onClick={() => void handleGenerateBrief()}
-            >
-              生成 AI 简报
-            </Button>
+            <div className="bgp-page__brief-buttons">
+              <Button
+                onClick={() => setBriefModalOpen(true)}
+                disabled={!brief || briefLoading || briefDetailLoading}
+              >
+                查看
+              </Button>
+              <Button
+                type="primary"
+                icon={<ReloadOutlined />}
+                loading={briefLoading}
+                onClick={() => void handleGenerateBrief()}
+              >
+                生成 AI 简报
+              </Button>
+            </div>
          </div>
        </div>

@@ -565,9 +575,6 @@ function BGP() {
                {formatDateTimeZhCN(brief.generated_at)}
              </Descriptions.Item>
            </Descriptions>
-            <div className="bgp-page__brief-content">
-              <MarkdownRenderer markdown={brief.content_markdown} />
-            </div>
          </div>
        ) : (
          <div className="bgp-page__brief-empty">
@@ -706,6 +713,26 @@ function BGP() {
            </Card>
          </Space>
        </div>
+
+        <Modal
+          title="BGP AI 简报"
+          open={briefModalOpen}
+          onCancel={() => setBriefModalOpen(false)}
+          footer={null}
+          width={920}
+          className="bgp-page__brief-modal"
+          style={{ top: 24 }}
+          styles={{ body: { paddingTop: 12 } }}
+          destroyOnHidden
+        >
+          {brief ? (
+            <div className="bgp-page__brief-modal-body">
+              <MarkdownRenderer markdown={brief.content_markdown} />
+            </div>
+          ) : (
+            <Text type="secondary">当前没有可查看的简报内容。</Text>
+          )}
+        </Modal>
      </div>
    </AppLayout>
  )
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -1,6 +1,6 @@
 [project]
 name = "planet"
-version = "0.24.7"
+version = "0.24.8"
 description = "智能星球计划 - 态势感知系统"
 requires-python = ">=3.14"
 dependencies = [
--- a/uv.lock
+++ b/uv.lock
@@ -475,7 +475,7 @@ wheels = [

 [[package]]
 name = "planet"
-version = "0.24.7"
+version = "0.24.8"
 source = { virtual = "." }
 dependencies = [
    { name = "aiofiles" },
@@ -1 +1 @@
 .24.7
 .24.8