fix: move bgp brief markdown into a modal workspace

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "planet-frontend",
-  "version": "0.24.7",
+  "version": "0.24.8",
   "private": true,
   "packageManager": "bun@1",
   "dependencies": {

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;

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>
   )