feat: add more info for user

VaalaCat · Jan 23, 2024 · 44db90f · 44db90f
1 parent 439e8e1
commit 44db90f
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -105,20 +105,22 @@ 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 \
 	--network=host \
     --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,32 +129,33 @@ 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   
 
 ```bash
 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复制的参数`
 
 ### 配置说明
 

diff --git 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,23 +224,27 @@ 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
             onClick={() => {
               router.push({ pathname: '/clientedit', query: { clientID: client.id } })
             }}
           >
-            修改
+            修改客户端配置
           </DropdownMenuItem>
           <DialogTrigger asChild>
             <DropdownMenuItem className="text-destructive">删除</DropdownMenuItem>

diff --git 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">

diff --git 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"

diff --git 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">

diff --git 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>