Merge pull request #76 from gujiangjiang/main

fix: 修复添加客户端监控时服务端地址为 undefined 的问题

Author: zaunist

frontend/src/pages/agents/CreateAgent.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
-import { Box, Flex, Heading, Text, Code } from "@radix-ui/themes";
-import { Button, Card, Separator } from "@/components/ui";
+import { Box, Flex, Heading, Text, Code, TextField } from "@radix-ui/themes";
+import { Button, Card, Separator, Switch } from "@/components/ui";
 import {
   ArrowLeftIcon,
   CopyIcon,
@@ -16,19 +16,21 @@ const CreateAgent = () => {
   const navigate = useNavigate();
   const [loading, setLoading] = useState(false);
   const [token, setToken] = useState("");
-  // 获取当前浏览器访问的地址作为服务端地址
-  const serverUrl = ENV_API_BASE_URL;
+  // 获取服务端地址。优先从环境变量获取，如果没有则使用当前窗口的源(origin)
+  const serverUrl = ENV_API_BASE_URL || window.location.origin;
   const { t } = useTranslation();
 
-  // State for copy buttons
+  // 复制按钮的状态
   const [serverUrlCopied, setServerUrlCopied] = useState(false);
   const [tokenCopied, setTokenCopied] = useState(false);
   const [installCommandCopied, setInstallCommandCopied] = useState(false);
 
+  // 代理功能的状态
+  const [useProxy, setUseProxy] = useState(false);
+  const [customProxyUrl, setCustomProxyUrl] = useState("https://gh-proxy.com/");
+
   // 生成服务端验证的 token
   useEffect(() => {
-    // 获取当前访问的URL
-
     const fetchToken = async () => {
       setLoading(true);
       try {
@@ -62,10 +64,17 @@ const CreateAgent = () => {
     setTimeout(() => setTokenCopied(false), 2000);
   };
 
+  // 根据是否使用代理生成安装脚本 URL
+  const getInstallScriptUrl = () => {
+    const baseUrl = "https://github.com/zaunist/xugou/blob/main/install-agent.sh";
+    if (useProxy) {
+      return `${customProxyUrl}${baseUrl}`;
+    }
+    return baseUrl;
+  };
+
   // 生成并复制安装命令
-  const installScriptUrl =
-    "https://gh-proxy.com/github.com/zaunist/xugou/blob/main/install-agent.sh";
-  const oneLinerInstallCommand = `curl -sSL ${installScriptUrl} | bash -s -- --server ${serverUrl} --token ${token} --interval 60`;
+  const oneLinerInstallCommand = `curl -sSL ${getInstallScriptUrl()} | bash -s -- --server ${serverUrl} --token ${token} --interval 60`;
 
   const handleCopyInstallCommand = () => {
     navigator.clipboard.writeText(oneLinerInstallCommand);
@@ -84,7 +93,7 @@ const CreateAgent = () => {
         </Flex>
       </Flex>
       <Card className="my-4 pr-4">
-        <Flex direction="column" gap="2" className="ml-4">
+        <Flex direction="column" gap="4" className="ml-4">
           {/* 提示信息 */}
           <Box>
             <Flex gap="2">
@@ -147,6 +156,30 @@ const CreateAgent = () => {
               </Text>
             </Flex>
 
+            {/* 代理设置 */}
+            <Flex direction="column" gap="2" mb="4">
+              <Flex align="center" gap="2">
+                <Switch
+                  id="proxy-switch"
+                  checked={useProxy}
+                  onCheckedChange={setUseProxy}
+                />
+                <Text as="label" htmlFor="proxy-switch" size="2">
+                  启用 GitHub 代理
+                </Text>
+              </Flex>
+              {useProxy && (
+                <Flex direction="column" gap="1" pl="6">
+                  <Text size="2">自定义代理地址 (可选):</Text>
+                  <TextField.Input
+                    value={customProxyUrl}
+                    onChange={(e) => setCustomProxyUrl(e.target.value)}
+                    placeholder="例如: https://gh-proxy.com/"
+                  />
+                </Flex>
+              )}
+            </Flex>
+
             <Card>
               <Flex direction="column" gap="3" p="3">
                 <Text as="div" size="2" weight="bold" mb="1">
@@ -155,7 +188,7 @@ const CreateAgent = () => {
                     "一键安装命令 (Linux/macOS/Windows):"
                   )}
                 </Text>
-                <Code size="2">{oneLinerInstallCommand}</Code>
+                <Code size="2" className="break-all">{oneLinerInstallCommand}</Code>
                 <Button variant="secondary" onClick={handleCopyInstallCommand}>
                   {installCommandCopied ? <CheckIcon /> : <CopyIcon />}
                   {installCommandCopied ? t("common.copied") : t("common.copy")}
@@ -171,7 +204,7 @@ const CreateAgent = () => {
           </Box>
 
           {/* 返回按钮 */}
-          <Flex justify="end" gap="3">
+          <Flex justify="end" gap="3" mt="4">
             <Button variant="secondary" onClick={() => navigate("/agents")}>
               {t("agent.add.returnToList")}
             </Button>