feat: add more info for user

2025-12-24 11:51:06 +08:00 · 2024-01-23 22:42:09 +08:00
parent 439e8e1fc7
commit 44db90f5ea
6 changed files with 61 additions and 53 deletions
--- a/README.md
+++ b/README.md
@@ -105,12 +105,14 @@ frp-panel可选docker和直接运行模式部署，直接部署请到release下
 - master   
   
 ```bash
-docker run -d -p 9000:9000 \
-	-p 9001:9001 \
+docker run -d -p 9000:9000 \ # API控制台端口
+	-p 9001:9001 \ # rpc端口
+	-p 7000:7000 \ # frps 端口
+	-p 20000-20050:20000-20050 \ # 给frps预留的端口
    --restart=unless-stopped \
-	-v /opt/frp-panel:/data \
+	-v /opt/frp-panel:/data \ # 数据存储位置
 	-e APP_GLOBAL_SECRET=your_secret \ # Master的secret注意不要泄漏，客户端和服务端的是通过Master生成的
-	-e MASTER_RPC_HOST=0.0.0.0 \
+	-e MASTER_RPC_HOST=0.0.0.0 \ # 这里要改成你服务器的外部IP
 	vaalacat/frp-panel
 # 或者
 docker run -d \
@@ -118,7 +120,7 @@ docker run -d \
    --restart=unless-stopped \
 	-v /opt/frp-panel:/data \
 	-e APP_GLOBAL_SECRET=your_secret \ # Master的secret注意不要泄漏，客户端和服务端的是通过Master生成的
-	-e MASTER_RPC_HOST=0.0.0.0 \
+	-e MASTER_RPC_HOST=0.0.0.0 \ # 这里要改成你服务器的外部IP
 	vaalacat/frp-panel
 ```
 - client   
@@ -127,7 +129,7 @@ docker run -d \
 docker run -d \
 	--network=host \
    --restart=unless-stopped \
-	vaalacat/frp-panel client -s xxx -i xxx # 在master WebUI复制的参数
+	vaalacat/frp-panel client -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数
 ```
 - server   
   
@@ -135,24 +137,25 @@ docker run -d \
 docker run -d \
 	--network=host \
    --restart=unless-stopped \
-	vaalacat/frp-panel server -s xxx -i xxx # 在master WebUI复制的参数
+	vaalacat/frp-panel server -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数
 ```

 ### 直接运行(Linux)
 - master   
-   
+
+注意修改IP
 ```
 APP_GLOBAL_SECRET=your_secret MASTER_RPC_HOST=0.0.0.0 frp-panel master
 ```
- client   
+- client
   
 ```
-frp-panel client -s xxx -i xxx # 在master WebUI复制的参数
+frp-panel client -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数
 ```
 - server
   
 ```
-frp-panel server -s xxx -i xxx # 在master WebUI复制的参数
+frp-panel server -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数
 ```
 ### 直接运行(Windows)
 在下载的可执行文件同名文件夹下创建一个 `.env` 文件(注意不要有后缀名)，然后输入以下内容保存后运行对应命令，注意，client和server的对应参数需要在web页面复制
@@ -166,9 +169,9 @@ DB_DSN=data.db

 client 和 server 要使用在 master WebUI复制的参数

- client: `frp-panel-amd64.exe client -s xxx -i xxx`
+- client: `frp-panel-amd64.exe client -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数`

- server: `frp-panel-amd64.exe server -s xxx -i xxx`
+- server: `frp-panel-amd64.exe server -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数`

 ### 配置说明

--- a/www/components/client_item.tsx
+++ b/www/components/client_item.tsx
@@ -44,7 +44,7 @@ export type ClientTableSchema = {
 export const columns: ColumnDef<ClientTableSchema>[] = [
  {
    accessorKey: 'id',
-    header: 'ID',
+    header: 'ID(点击查看安装命令)',
    cell: ({ row }) => {
      return <ClientID client={row.original} />
    },
@@ -76,7 +76,7 @@ export const columns: ColumnDef<ClientTableSchema>[] = [
  },
  {
    accessorKey: 'secret',
-    header: '连接密钥',
+    header: '连接密钥(点击查看启动命令)',
    cell: ({ row }) => {
      const client = row.original
      return <ClientSecret client={client} />
@@ -161,20 +161,13 @@ export const ClientSecret = ({ client }: { client: ClientTableSchema }) => {
        <div
          onMouseEnter={() => setShowSecrect(true)}
          onMouseLeave={() => setShowSecrect(false)}
-          onClick={() => {
-            if (platformInfo) {
-              navigator.clipboard.writeText(ExecCommandStr('client', client, platformInfo))
-              toast({ description: '复制成功' })
-            } else {
-              toast({ description: '获取平台信息失败' })
-            }
-          }}
          className="font-medium hover:rounded hover:bg-slate-100 p-2 font-mono whitespace-nowrap"
        >
          {showSecrect ? client.secret : fakeSecret}
        </div>
      </PopoverTrigger>
-      <PopoverContent className="w-fit overflow-auto max-w-48">
+      <PopoverContent className="w-fit overflow-auto max-w-80">
+        <div>运行命令(需要<a className='text-blue-500' href='https://github.com/VaalaCat/frp-panel/releases'>点击这里</a>自行下载文件)</div>
        <div className="p-2 border rounded font-mono w-fit">
          {platformInfo === undefined ? '获取平台信息失败' : ExecCommandStr('client', client, platformInfo)}
        </div>
@@ -231,15 +224,19 @@ export const ClientActions: React.FC<ClientItemProps> = ({ client, table }) => {
          <DropdownMenuLabel>操作</DropdownMenuLabel>
          <DropdownMenuItem
            onClick={() => {
-              if (platformInfo) {
-                navigator.clipboard.writeText(ExecCommandStr('client', client, platformInfo))
-                toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
-              } else {
+              try {
+                if (platformInfo) {
+                  navigator.clipboard.writeText(ExecCommandStr('client', client, platformInfo))
+                  toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
+                } else {
+                  toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
+                }
+              } catch (error) {
                toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
              }
            }}
          >
-            复制启动命令
+            复制启动命令(也可点击列表中的密钥查看)
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
@@ -247,7 +244,7 @@ export const ClientActions: React.FC<ClientItemProps> = ({ client, table }) => {
              router.push({ pathname: '/clientedit', query: { clientID: client.id } })
            }}
          >
-            修改
+            修改客户端配置
          </DropdownMenuItem>
          <DialogTrigger asChild>
            <DropdownMenuItem className="text-destructive">删除</DropdownMenuItem>
--- a/www/components/frpc_card.tsx
+++ b/www/components/frpc_card.tsx
@@ -73,7 +73,10 @@ export const FRPCFormCard: React.FC<FRPCFormCardProps> = ({
    <Card className="w-full">
      <CardHeader>
        <CardTitle>编辑隧道</CardTitle>
-        <CardDescription>选择客户端和服务端以编辑隧道</CardDescription>
+        <CardDescription>
+          <div>注意⚠️：选择的「服务端」必须提前配置！</div>
+          <div>选择客户端和服务端以编辑隧道</div>
+        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className=" flex items-center space-x-4 rounded-md border p-4">
--- a/www/components/frpc_form.tsx
+++ b/www/components/frpc_form.tsx
@@ -123,7 +123,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID }) => {
      <Accordion type="single" collapsible key={clientID + serverID + client}>
        <AccordionItem value="proxies">
          <AccordionTrigger>
-            <AccordionHeader className="flex flex-row justify-between">代理配置</AccordionHeader>
+            <AccordionHeader className="flex flex-row justify-between">代理配置(点击展开)</AccordionHeader>
          </AccordionTrigger>
          <AccordionContent className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
            {clientProxyConfigs.map((item) => {
@@ -188,7 +188,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID }) => {
            })}
          </AccordionContent>
        </AccordionItem>
-        <AccordionItem value="visitors">
+        {/* <AccordionItem value="visitors">
          <AccordionTrigger>
            <AccordionHeader className="flex flex-row justify-between">Visitor 配置</AccordionHeader>
          </AccordionTrigger>
@@ -254,7 +254,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID }) => {
              )
            })}
          </AccordionContent>
-        </AccordionItem>
+        </AccordionItem> */}
      </Accordion>
      <Button
        className="mt-2"
--- a/www/components/frps_card.tsx
+++ b/www/components/frps_card.tsx
@@ -50,7 +50,15 @@ export const FRPSFormCard: React.FC<FRPSFormCardProps> = ({ serverID: defaultSer
    <Card className="w-full">
      <CardHeader>
        <CardTitle>服务端配置</CardTitle>
-        <CardDescription>选择服务端以管理Frps服务</CardDescription>
+        <CardDescription>
+          <div>
+            注意⚠️：修改服务端配置文件后，服务端<a className='text-red-600'>会退出</a>
+            <br />如果您使用的是docker容器且启动命令中包含了 --restart=unless-stopped 或 --restart=always 则无需担心。
+            <br />如果您使用的是systemd安装也无需担心。
+          </div>
+          <div>
+            选择服务端以管理Frps服务
+          </div></CardDescription>
      </CardHeader>
      <CardContent>
        <div className=" flex items-center space-x-4 rounded-md border p-4">
--- a/www/components/server_item.tsx
+++ b/www/components/server_item.tsx
@@ -46,7 +46,7 @@ export type ServerTableSchema = {
 export const columns: ColumnDef<ServerTableSchema>[] = [
  {
    accessorKey: 'id',
-    header: 'ID',
+    header: 'ID(点击查看安装命令)',
    cell: ({ row }) => {
      return <ServerID server={row.original} />
    },
@@ -86,7 +86,7 @@ export const columns: ColumnDef<ServerTableSchema>[] = [
  },
  {
    accessorKey: 'secret',
-    header: '连接密钥',
+    header: '连接密钥(点击查看启动命令)',
    cell: ({ row }) => {
      const Server = row.original
      return <ServerSecret server={Server} />
@@ -172,20 +172,13 @@ export const ServerSecret = ({ server }: { server: ServerTableSchema }) => {
        <div
          onMouseEnter={() => setShowSecrect(true)}
          onMouseLeave={() => setShowSecrect(false)}
-          onClick={() => {
-            if (platformInfo) {
-              navigator.clipboard.writeText(ExecCommandStr('server', server, platformInfo))
-              toast({ description: '复制成功' })
-            } else {
-              toast({ description: '获取平台信息失败' })
-            }
-          }}
          className="font-medium hover:rounded hover:bg-slate-100 p-2 font-mono whitespace-nowrap"
        >
          {showSecrect ? server.secret : fakeSecret}
        </div>
      </PopoverTrigger>
      <PopoverContent className="w-fit overflow-auto max-w-48">
+        <div>运行命令(需要<a className='text-blue-500' href='https://github.com/VaalaCat/frp-panel/releases'>点击这里</a>自行下载文件)</div>
        <div className="p-2 border rounded font-mono w-fit">
          {platformInfo === undefined ? '获取平台信息失败' : ExecCommandStr('server', server, platformInfo)}
        </div>
@@ -241,15 +234,19 @@ export const ServerActions: React.FC<ServerItemProps> = ({ server, table }) => {
          <DropdownMenuLabel>操作</DropdownMenuLabel>
          <DropdownMenuItem
            onClick={() => {
-              if (platformInfo) {
-                navigator.clipboard.writeText(ExecCommandStr('server', server, platformInfo))
-                toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
-              } else {
+              try {
+                if (platformInfo) {
+                  navigator.clipboard.writeText(ExecCommandStr('server', server, platformInfo))
+                  toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
+                } else {
+                  toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
+                }
+              } catch (error) {
                toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
              }
            }}
          >
-            复制启动命令
+            复制启动命令(也可点击列表中的密钥查看)
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
@@ -262,7 +259,7 @@ export const ServerActions: React.FC<ServerItemProps> = ({ server, table }) => {
              })
            }}
          >
-            修改
+            修改服务端配置
          </DropdownMenuItem>
          <DialogTrigger asChild>
            <DropdownMenuItem className="text-destructive">删除</DropdownMenuItem>
@@ -271,11 +268,11 @@ export const ServerActions: React.FC<ServerItemProps> = ({ server, table }) => {
      </DropdownMenu>
      <DialogContent>
        <DialogHeader>
-          <DialogTitle>确定删除该客户端?</DialogTitle>
+          <DialogTitle>确定删除该服务端?</DialogTitle>
          <DialogDescription>
            <p className="text-destructive">此操作无法撤消。您确定要永久从我们的服务器中删除该客户端?</p>
            <p className="text-gray-500 border-l-4 border-gray-500 pl-4 py-2">
-              删除后运行中的客户端将无法通过现有参数再次连接，如果您需要删除客户端对外的连接，可以选择清空配置
+              删除后运行中的服务端将无法通过现有参数再次连接，如果您需要停止服务端的服务，可以选择清空配置
            </p>
          </DialogDescription>
        </DialogHeader>