okooooooo/xugou
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新 Navbar 组件以增强移动端菜单功能和样式，优化 CreateAgent 和 CreateMonitor 页面布局，调整 NotificationsConfig 页面卡片样式，改善状态页配置的标签样式

Browse Source
This commit is contained in:
CHENPrime committed 2025-06-03 09:37:01 +08:00
1 parent 882e85a096
commit c4e5100e9e
5 files changed
+83 -113
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

frontend/src/components/Navbar.tsx
+54 -84
View File
@@ -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")}
frontend/src/pages/agents/CreateAgent.tsx
+6 -6
View File
@@ -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")}
frontend/src/pages/monitors/CreateMonitor.tsx
+1 -1
View File
@@ -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">
frontend/src/pages/notifications/NotificationsConfig.tsx
+21 -21
View File
@@ -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">
frontend/src/pages/status/StatusPageConfig.tsx
+1 -1
View File
@@ -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>