From df4833aea8a64e5f4994e419b26cb3f19a3cd136 Mon Sep 17 00:00:00 2001
From: CHENPrime <chenbprime@qq.com>
Date: Tue, 3 Jun 2025 10:03:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9B=B4=E6=96=B0=20Navbar=20=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BB=A5=E6=B7=BB=E5=8A=A0=20DownloadIcon=EF=BC=8C?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4=20AgentDetail=20=E5=92=8C=20MonitorsList=20?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Navbar.tsx           | 3 ++-
 frontend/src/pages/agents/AgentDetail.tsx    | 6 +++---
 frontend/src/pages/agents/AgentsList.tsx     | 2 +-
 frontend/src/pages/monitors/MonitorsList.tsx | 2 +-
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index b1e9daf..1c49ce7 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -22,7 +22,8 @@ import {
   CubeIcon,
   PieChartIcon,
   BellIcon,
-  HamburgerMenuIcon
+  HamburgerMenuIcon,
+  DownloadIcon
 } from "@radix-ui/react-icons";
 import { useAuth } from "../providers/AuthProvider";
 import { useState, useEffect } from "react";
diff --git a/frontend/src/pages/agents/AgentDetail.tsx b/frontend/src/pages/agents/AgentDetail.tsx
index 68c8908..e4a6868 100644
--- a/frontend/src/pages/agents/AgentDetail.tsx
+++ b/frontend/src/pages/agents/AgentDetail.tsx
@@ -196,7 +196,7 @@ const AgentDetail = () => {
 
   return (
     <Container size="4">
-      <Flex justify="between" align="center">
+      <Flex justify="between" align="start" direction={{ initial: "column", sm: "row" }} gap="4">
         <Flex align="center" gap="2">
           <Button variant="secondary" onClick={() => navigate("/agents")}>
             <ArrowLeftIcon />
@@ -234,7 +234,7 @@ const AgentDetail = () => {
           </Button>
         </Flex>
       </Flex>
-      <Box pt="3">
+      <Box py="3">
         <Grid columns={{ initial: "1" }} gap="4">
           {/* 系统信息卡片 */}
           <Card>
@@ -380,7 +380,7 @@ const AgentDetail = () => {
           </Card>
 
           {/* Agent 资源信息卡片 */}
-          <Card>
+          <Card className="pr-4">
             <Flex direction="column" gap="2" className="ml-4">
               <Heading size="3">{t("agent.metrics")}</Heading>
               <AgentCard
diff --git a/frontend/src/pages/agents/AgentsList.tsx b/frontend/src/pages/agents/AgentsList.tsx
index 1a70cc7..ce204e0 100644
--- a/frontend/src/pages/agents/AgentsList.tsx
+++ b/frontend/src/pages/agents/AgentsList.tsx
@@ -350,7 +350,7 @@ const AgentsList = () => {
         </Flex>
       </Flex>
 
-      <Box className="mt-4 space-x-2">
+      <Box className="my-4 space-x-2">
         {agents.length === 0 ? (
           <Card>
             <Flex
diff --git a/frontend/src/pages/monitors/MonitorsList.tsx b/frontend/src/pages/monitors/MonitorsList.tsx
index 170d82a..02db890 100644
--- a/frontend/src/pages/monitors/MonitorsList.tsx
+++ b/frontend/src/pages/monitors/MonitorsList.tsx
@@ -231,7 +231,7 @@ const MonitorsList = () => {
         </Flex>
       </Flex>
 
-      <Container className="mt-4 space-x-2">
+      <Container className="my-4 space-x-2">
         {monitors.length === 0 ? (
           <Card>
             <Flex