From 2a94be08fa9e9fe71afde3605644b0b1a0750bb6 Mon Sep 17 00:00:00 2001
From: hkfires <10558748+hkfires@users.noreply.github.com>
Date: Wed, 24 Dec 2025 12:38:57 +0800
Subject: [PATCH] fix(logs): optimize layout for full height

---
 src/components/ui/Card.tsx     |  5 +++--
 src/i18n/locales/en.json       |  1 +
 src/i18n/locales/zh-CN.json    |  1 +
 src/pages/LogsPage.module.scss | 17 ++++++++++++++++-
 src/pages/LogsPage.tsx         | 27 ++++++++++++++++-----------
 src/styles/layout.scss         |  2 ++
 6 files changed, 39 insertions(+), 14 deletions(-)

diff --git a/src/components/ui/Card.tsx b/src/components/ui/Card.tsx
index 1e09b2b..4427978 100644
--- a/src/components/ui/Card.tsx
+++ b/src/components/ui/Card.tsx
@@ -3,11 +3,12 @@ import type { PropsWithChildren, ReactNode } from 'react';
 interface CardProps {
   title?: ReactNode;
   extra?: ReactNode;
+  className?: string;
 }
 
-export function Card({ title, extra, children }: PropsWithChildren<CardProps>) {
+export function Card({ title, extra, children, className }: PropsWithChildren<CardProps>) {
   return (
-    <div className="card">
+    <div className={className ? `card ${className}` : 'card'}>
       {(title || extra) && (
         <div className="card-header">
           <div className="title">{title}</div>
diff --git a/src/i18n/locales/en.json b/src/i18n/locales/en.json
index d989c97..8864953 100644
--- a/src/i18n/locales/en.json
+++ b/src/i18n/locales/en.json
@@ -609,6 +609,7 @@
     "load_more_hint": "Scroll up to load more",
     "hidden_lines": "Hidden: {{count}} lines",
     "loaded_lines": "Loaded: {{count}} lines",
+    "filtered_lines": "Filtered: {{count}} lines",
     "hide_management_logs": "Hide {{prefix}} logs",
     "search_placeholder": "Search logs by content or keyword",
     "search_empty_title": "No matching logs found",
diff --git a/src/i18n/locales/zh-CN.json b/src/i18n/locales/zh-CN.json
index 5555d41..7dff98f 100644
--- a/src/i18n/locales/zh-CN.json
+++ b/src/i18n/locales/zh-CN.json
@@ -609,6 +609,7 @@
     "load_more_hint": "向上滚动加载更多",
     "hidden_lines": "已隐藏 {{count}} 行",
     "loaded_lines": "已载入 {{count}} 行",
+    "filtered_lines": "已过滤 {{count}} 行",
     "hide_management_logs": "屏蔽 {{prefix}} 日志",
     "search_placeholder": "搜索日志内容或关键字",
     "search_empty_title": "未找到匹配的日志",
diff --git a/src/pages/LogsPage.module.scss b/src/pages/LogsPage.module.scss
index 57b0e1e..d26d753 100644
--- a/src/pages/LogsPage.module.scss
+++ b/src/pages/LogsPage.module.scss
@@ -2,6 +2,10 @@
 
 .container {
   width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
 }
 
 .pageTitle {
@@ -46,6 +50,16 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
+  flex: 1;
+  min-height: 0;
+}
+
+.logCard {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .toolbar {
@@ -146,7 +160,8 @@
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
   border-radius: $radius-md;
-  max-height: 620px;
+  flex: 1;
+  min-height: 200px;
   overflow: auto;
   position: relative;
 }
diff --git a/src/pages/LogsPage.tsx b/src/pages/LogsPage.tsx
index 6521577..750098d 100644
--- a/src/pages/LogsPage.tsx
+++ b/src/pages/LogsPage.tsx
@@ -550,7 +550,7 @@ export function LogsPage() {
   const isSearching = trimmedSearchQuery.length > 0;
   const baseLines = isSearching ? logState.buffer : visibleLines;
 
-  const { filteredLines } = useMemo(() => {
+  const { filteredLines, removedCount } = useMemo(() => {
     let working = baseLines;
     let removed = 0;
 
@@ -649,7 +649,7 @@ export function LogsPage() {
 
       <div className={styles.content}>
         {activeTab === 'logs' && (
-          <Card>
+          <Card className={styles.logCard}>
             {error && <div className="error-box">{error}</div>}
 
             <div className={styles.filters}>
@@ -750,6 +750,11 @@ export function LogsPage() {
                       <span>
                         {t('logs.loaded_lines', { count: parsedVisibleLines.length })}
                       </span>
+                      {removedCount > 0 && (
+                        <span className={styles.loadMoreCount}>
+                          {t('logs.filtered_lines', { count: removedCount })}
+                        </span>
+                      )}
                       <span className={styles.loadMoreCount}>
                         {t('logs.hidden_lines', { count: logState.visibleFrom })}
                       </span>
@@ -800,6 +805,15 @@ export function LogsPage() {
                             </span>
                           )}
 
+                          {line.requestId && (
+                            <span
+                              className={[styles.badge, styles.requestIdBadge].join(' ')}
+                              title={line.requestId}
+                            >
+                              {line.requestId}
+                            </span>
+                          )}
+
                           {typeof line.statusCode === 'number' && (
                             <span
                               className={[
@@ -827,15 +841,6 @@ export function LogsPage() {
                             </span>
                           )}
 
-                          {line.requestId && (
-                            <span
-                              className={[styles.badge, styles.requestIdBadge].join(' ')}
-                              title={line.requestId}
-                            >
-                              {line.requestId}
-                            </span>
-                          )}
-
                           {line.path && (
                             <span className={styles.path} title={line.path}>
                               {line.path}
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 121d6ab..495bb5c 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -336,6 +336,8 @@
   display: flex;
   flex-direction: column;
   gap: $spacing-lg;
+  min-height: 0;
+  overflow: hidden;
 
   @media (max-width: $breakpoint-mobile) {
     padding: $spacing-md;