From c4e5100e9eafddaa9609bdfec746736693dd31c6 Mon Sep 17 00:00:00 2001
From: CHENPrime <chenbprime@qq.com>
Date: Tue, 3 Jun 2025 09:37:01 +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=E5=A2=9E=E5=BC=BA=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=8A=9F=E8=83=BD=E5=92=8C=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=20CreateAgent=20=E5=92=8C=20CreateM?=
 =?UTF-8?q?onitor=20=E9=A1=B5=E9=9D=A2=E5=B8=83=E5=B1=80=EF=BC=8C=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4=20NotificationsConfig=20=E9=A1=B5=E9=9D=A2=E5=8D=A1?=
 =?UTF-8?q?=E7=89=87=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=94=B9=E5=96=84=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5=E9=85=8D=E7=BD=AE=E7=9A=84=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=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            | 138 +++++++-----------
 frontend/src/pages/agents/CreateAgent.tsx     |  12 +-
 frontend/src/pages/monitors/CreateMonitor.tsx |   2 +-
 .../notifications/NotificationsConfig.tsx     |  42 +++---
 .../src/pages/status/StatusPageConfig.tsx     |   2 +-
 5 files changed, 83 insertions(+), 113 deletions(-)

diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 2b177dd..b1e9daf 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -73,93 +73,63 @@ const Navbar = () => {
           >
             <Flex gap="2" align="center">
               {/* 移动端屏幕菜单栏 */}
-              <Box className="lg:hidden">
-                <DropdownMenu>
-                  <DropdownMenuTrigger>
-                    <Button variant="ghost">
-                      <HamburgerMenuIcon width="20" height="20" />
-                    </Button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent>
-                    <DropdownMenuItem>
-                      <Link
-                        to="/dashboard"
-                        className={`nav-link ${
-                          isActive("/dashboard") ? "active" : ""
-                        }`}
-                      >
-                        <Flex gap="2" align="center">
-                          <DashboardIcon width="14" height="14" />
-                          <Text className="pl-2" size="2">{t("navbar.dashboard")}</Text>
+              { isAuthenticated ? (
+                <>  
+                  <Box className="lg:hidden">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger>
+                        <Flex className="inline-flex items-center justify-center rounded-md px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring">
+                          <HamburgerMenuIcon width="20" height="20" />
                         </Flex>
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <Link
-                        to="/monitors"
-                        className={`nav-link ${
-                          isActive("/monitors") ? "active" : ""
-                        }`}
-                      >
-                        <Flex gap="2" align="center">
-                          <ActivityLogIcon width="14" height="14" />
-                          <Text className="pl-2" size="2">
-                            {t("navbar.apiMonitors")}
-                          </Text>
-                        </Flex>
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <Link
-                        to="/agents"
-                        className={`nav-link ${
-                          isActive("/agents") ? "active" : ""
-                        }`}
-                      >
-                        <Flex gap="2" align="center">
-                          <CubeIcon width="14" height="14" />
-                          <Text className="pl-2" size="2">
-                            {t("navbar.agentMonitors")}
-                          </Text>
-                        </Flex>
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <Link
-                        to="/status/config"
-                        className={`nav-link ${
-                          isActive("/status/config") ? "active" : ""
-                        }`}
-                      >
-                        <Flex gap="2" align="center">
-                          <PieChartIcon width="14" height="14" />
-                          <Text className="pl-2" size="2">{t("navbar.statusPage")}</Text>
-                        </Flex>
-                      </Link>
-                    </DropdownMenuItem>
-                    <DropdownMenuItem>
-                      <Link
-                        to="/notifications"
-                        className={`nav-link ${
-                          isActive("/notifications") ? "active" : ""
-                        }`}
-                      >
-                        <Flex gap="2" align="center">
-                          <BellIcon width="14" height="14" />
-                          <Text className="pl-2" size="2">
-                            {t("navbar.notifications")}
-                          </Text>
-                        </Flex>
-                      </Link>
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              </Box>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent>
+                        <DropdownMenuItem onClick={() => navigate("/dashboard")}>
+                          <Flex gap="2" align="center">
+                            <DashboardIcon width="14" height="14" />
+                            <Text className="pl-2" size="2">{t("navbar.dashboard")}</Text>
+                          </Flex>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => navigate("/monitors")}>
+                          <Flex gap="2" align="center">
+                            <ActivityLogIcon width="14" height="14" />
+                            <Text className="pl-2" size="2">
+                              {t("navbar.apiMonitors")}
+                            </Text>
+                          </Flex>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => navigate("/agents")}>
+                          <Flex gap="2" align="center">
+                            <CubeIcon width="14" height="14" />
+                            <Text className="pl-2" size="2">
+                              {t("navbar.agentMonitors")}
+                            </Text>
+                          </Flex>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => navigate("/status/config")}>
+                          <Flex gap="2" align="center">
+                            <PieChartIcon width="14" height="14" />
+                            <Text className="pl-2" size="2">{t("navbar.statusPage")}</Text>
+                          </Flex>
+                        </DropdownMenuItem>
+                        <DropdownMenuItem onClick={() => navigate("/notifications")}>
+                          <Flex gap="2" align="center">
+                            <BellIcon width="14" height="14" />
+                            <Text className="pl-2" size="2">
+                              {t("navbar.notifications")}
+                            </Text>
+                          </Flex>
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </Box>
+
+                  <Separator orientation="vertical" className="!h-6 lg:hidden" />
+                </>
+              ) : null }
 
-              <Separator orientation="vertical" className="!h-6 lg:hidden" />
 
               {/* Logo 部分 */}
-              <Flex align="center" className="ml-2">
+              <Flex align="center" className="ml-3">
                 <Link to="/" >
                   <Flex align="center" gap="2">
                     <Box >
@@ -321,7 +291,7 @@ const Navbar = () => {
                   {/* 语言选择器 */}
                   <LanguageSelector />
 
-                  <Separator orientation="vertical" />
+                  <Separator orientation="vertical" className="!h-6" />
 
                   <Button variant="ghost" onClick={() => navigate("/login")}>
                     {t("navbar.login")}
diff --git a/frontend/src/pages/agents/CreateAgent.tsx b/frontend/src/pages/agents/CreateAgent.tsx
index 962ad50..c8a4136 100644
--- a/frontend/src/pages/agents/CreateAgent.tsx
+++ b/frontend/src/pages/agents/CreateAgent.tsx
@@ -17,7 +17,7 @@ const CreateAgent = () => {
   const [loading, setLoading] = useState(false);
   const [token, setToken] = useState("");
   // 获取当前浏览器访问的地址作为服务端地址
-  const serverUrl = ENV_API_BASE_URL;
+  const serverUrl = "http://127.0.0.1:3000/api";
   const { t } = useTranslation();
 
   // State for copy buttons
@@ -83,7 +83,7 @@ const CreateAgent = () => {
           <Heading size="6">{t("agent.form.title.create")}</Heading>
         </Flex>
       </Flex>
-      <Card className="mt-4">
+      <Card className="my-4 pr-4">
         <Flex direction="column" gap="2" className="ml-4">
           {/* 提示信息 */}
           <Box>
@@ -98,9 +98,9 @@ const CreateAgent = () => {
             <Text as="label" size="2" weight="bold">
               {t("agent.add.serverAddress")}
             </Text>
-            <Flex gap="2">
+            <Flex gap="2" align="center">
               <Text className="token-display">{serverUrl}</Text>
-              <Button variant="secondary" onClick={handleCopyServerUrl}>
+              <Button variant="secondary" onClick={handleCopyServerUrl} className="ml-2">
                 {serverUrlCopied ? <CheckIcon /> : <CopyIcon />}
                 {serverUrlCopied ? t("common.copied") : t("common.copy")}
               </Button>
@@ -119,8 +119,8 @@ const CreateAgent = () => {
               <Text>{t("agent.add.generatingToken")}</Text>
             ) : (
               <>
-                <Flex gap="2">
-                  <Text className="token-display">{token}</Text>
+                <Flex gap="2" align="center">
+                  <Text className="token-display break-all">{token}</Text>
                   <Button variant="secondary" onClick={handleCopyToken}>
                     {tokenCopied ? <CheckIcon /> : <CopyIcon />}
                     {tokenCopied ? t("common.copied") : t("common.copy")}
diff --git a/frontend/src/pages/monitors/CreateMonitor.tsx b/frontend/src/pages/monitors/CreateMonitor.tsx
index 1df1a68..a4015db 100644
--- a/frontend/src/pages/monitors/CreateMonitor.tsx
+++ b/frontend/src/pages/monitors/CreateMonitor.tsx
@@ -152,7 +152,7 @@ const CreateMonitor = () => {
           <Heading size="6">{t("monitor.form.title.create")}</Heading>
         </Flex>
       </Flex>
-      <Card className="mt-4">
+      <Card className="my-4 pr-4">
         <form onSubmit={handleSubmit}>
           <Box pt="2">
             <Flex direction="column" gap="2" className="ml-4">
diff --git a/frontend/src/pages/notifications/NotificationsConfig.tsx b/frontend/src/pages/notifications/NotificationsConfig.tsx
index f5c1980..6b1f16d 100644
--- a/frontend/src/pages/notifications/NotificationsConfig.tsx
+++ b/frontend/src/pages/notifications/NotificationsConfig.tsx
@@ -631,8 +631,8 @@ const NotificationsConfig = () => {
             </Button>
           </Flex>
 
-          <Card>
-            <Box p="2">
+          <Box>
+            <Flex py="2" direction="column" gap="2">
               <Text className="text-gray-600 mb-3">
                 {t("notifications.channels.description")}
               </Text>
@@ -642,12 +642,12 @@ const NotificationsConfig = () => {
                   {t("notifications.channels.noChannels")}
                 </Text>
               ) : (
-                <Flex direction="column" gap="1">
+                <Flex direction="column" gap="2">
                   {channels.map((channel) => (
-                    <Card key={channel.id}>
+                    <Card key={channel.id} className="px-2">
                       <Flex className="justify-between items-center">
-                        <Flex direction="column" gap="1">
-                          <Flex gap="2" align="center">
+                        <Flex direction="column" gap="1" className="grow">
+                          <Flex gap="2" align="center" className="break-all">
                             <Text className="text-lg">{channel.name}</Text>
                             {channel.type === "telegram" &&
                               channel.config &&
@@ -715,8 +715,8 @@ const NotificationsConfig = () => {
                   ))}
                 </Flex>
               )}
-            </Box>
-          </Card>
+            </Flex>
+          </Box>
         </Box>
       </Flex>
     );
@@ -742,8 +742,8 @@ const NotificationsConfig = () => {
             </Button>
           </Flex>
 
-          <Card>
-            <Box p="3">
+          <Box>
+            <Box>
               <Text size="2" color="gray" mb="3">
                 {t("notifications.templates.description")}
               </Text>
@@ -755,7 +755,7 @@ const NotificationsConfig = () => {
               ) : (
                 <Flex direction="column" gap="3">
                   {templates.map((template) => (
-                    <Card key={template.id}>
+                    <Card key={template.id} className="px-4">
                       <Flex direction="column" gap="3">
                         <Flex justify="between" align="center">
                           <Flex gap="2" align="center">
@@ -801,7 +801,7 @@ const NotificationsConfig = () => {
                 </Flex>
               )}
             </Box>
-          </Card>
+          </Box>
         </Box>
       </Flex>
     );
@@ -823,9 +823,9 @@ const NotificationsConfig = () => {
             {t("notifications.settings.monitors")}
           </Text>
 
-          <Card>
+          <Card className="mt-2">
             <Box p="1">
-              <Flex direction="column" gap="1">
+              <Flex direction="column" gap="1" className="px-2">
                 <Flex justify="between" align="center">
                   <Box>
                     <Text className="text-base">
@@ -844,7 +844,7 @@ const NotificationsConfig = () => {
                 </Flex>
 
                 {settings.monitors.enabled && (
-                  <Box pl="1">
+                  <Box pl="4">
                     <Flex direction="column" gap="3">
                       <Flex align="center" gap="2">
                         <Switch
@@ -891,14 +891,14 @@ const NotificationsConfig = () => {
         </Box>
 
         {/* 全局客户端通知设置 */}
-        <Box p="1">
+        <Box>
           <Text className="text-lg mb-2">
             {t("notifications.settings.agents")}
           </Text>
 
-          <Card>
+          <Card className="mt-2">
             <Box p="1">
-              <Flex direction="column" gap="4">
+              <Flex direction="column" gap="4" className="px-2">
                 <Flex justify="between" align="center">
                   <Box>
                     <Text className="text-base">
@@ -1102,7 +1102,7 @@ const NotificationsConfig = () => {
           };
 
           return (
-            <Card key={monitorId}>
+            <Card key={monitorId} className="px-4">
               <Flex direction="column" gap="3">
                 <Flex justify="between" align="center">
                   <Box>
@@ -1216,7 +1216,7 @@ const NotificationsConfig = () => {
           };
 
           return (
-            <Card key={agentId}>
+            <Card key={agentId} className="px-4">
               <Flex direction="column" gap="3">
                 <Flex justify="between" align="center">
                   <Box>
@@ -1766,7 +1766,7 @@ const NotificationsConfig = () => {
         {loading ? (
           <Text>{t("common.loading")}...</Text>
         ) : (
-          <Card>
+          <Card className="mb-4">
             <Tabs defaultValue="global">
               <TabsList className="overflow-auto">
                 <TabsTrigger value="global">
diff --git a/frontend/src/pages/status/StatusPageConfig.tsx b/frontend/src/pages/status/StatusPageConfig.tsx
index 6047296..151bc11 100644
--- a/frontend/src/pages/status/StatusPageConfig.tsx
+++ b/frontend/src/pages/status/StatusPageConfig.tsx
@@ -250,7 +250,7 @@ const StatusPageConfig = () => {
       </Box>
       <Card className="mt-4">
         <Tabs defaultValue="general">
-          <TabsList>
+          <TabsList className="overflow-auto">
             <TabsTrigger value="general">
               {t("statusPageConfig.general")}
             </TabsTrigger>