Skip to content

Commit 44db90f

Browse files
VaalaCatVaalaCat
committed
feat: add more info for user
1 parent 439e8e1 commit 44db90f

File tree

6 files changed

+61
-53
lines changed

6 files changed

+61
-53
lines changed

‎README.md‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -105,20 +105,22 @@ frp-panel可选docker和直接运行模式部署，直接部署请到release下
105105
- master
106106

107107
```bash
108-
docker run -d -p 9000:9000 \
109-
-p 9001:9001 \
108+
docker run -d -p 9000:9000 \ # API控制台端口
109+
-p 9001:9001 \ # rpc端口
110+
-p 7000:7000 \ # frps 端口
111+
-p 20000-20050:20000-20050 \ # 给frps预留的端口
110112
--restart=unless-stopped \
111-
-v /opt/frp-panel:/data \
113+
-v /opt/frp-panel:/data \ # 数据存储位置
112114
-e APP_GLOBAL_SECRET=your_secret \ # Master的secret注意不要泄漏，客户端和服务端的是通过Master生成的
113-
-e MASTER_RPC_HOST=0.0.0.0 \
115+
-e MASTER_RPC_HOST=0.0.0.0 \ # 这里要改成你服务器的外部IP
114116
vaalacat/frp-panel
115117
# 或者
116118
docker run -d \
117119
--network=host \
118120
--restart=unless-stopped \
119121
-v /opt/frp-panel:/data \
120122
-e APP_GLOBAL_SECRET=your_secret \ # Master的secret注意不要泄漏，客户端和服务端的是通过Master生成的
121-
-e MASTER_RPC_HOST=0.0.0.0 \
123+
-e MASTER_RPC_HOST=0.0.0.0 \ # 这里要改成你服务器的外部IP
122124
vaalacat/frp-panel
123125
```
124126
- client
@@ -127,32 +129,33 @@ docker run -d \
127129
docker run -d \
128130
--network=host \
129131
--restart=unless-stopped \
130-
vaalacat/frp-panel client -s xxx -i xxx # 在master WebUI复制的参数
132+
vaalacat/frp-panel client -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数
131133
```
132134
- server
133135

134136
```bash
135137
docker run -d \
136138
--network=host \
137139
--restart=unless-stopped \
138-
vaalacat/frp-panel server -s xxx -i xxx # 在master WebUI复制的参数
140+
vaalacat/frp-panel server -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数
139141
```
140142

141143
### 直接运行(Linux)
142144
- master
143-
145+
146+
注意修改IP
144147
```
145148
APP_GLOBAL_SECRET=your_secret MASTER_RPC_HOST=0.0.0.0 frp-panel master
146149
```
147-
- client
150+
- client
148151

149152
```
150-
frp-panel client -s xxx -i xxx # 在master WebUI复制的参数
153+
frp-panel client -s xxxx -i xxxx -a xxxx -r 127.0.0.1 -c 9001 -p 9000 -e http # 在master WebUI复制的参数
151154
```
152155
- server
153156

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

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

169-
- client: `frp-panel-amd64.exe client -s xxx -i xxx`
172+
- 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复制的参数`
170173

171-
- server: `frp-panel-amd64.exe server -s xxx -i xxx`
174+
- 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复制的参数`
172175

173176
### 配置说明
174177

‎www/components/client_item.tsx‎

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export type ClientTableSchema = {
4444
export const columns: ColumnDef<ClientTableSchema>[] = [
4545
{
4646
accessorKey: 'id',
47-
header: 'ID',
47+
header: 'ID(点击查看安装命令)',
4848
cell: ({ row }) => {
4949
return <ClientID client={row.original} />
5050
},
@@ -76,7 +76,7 @@ export const columns: ColumnDef<ClientTableSchema>[] = [
7676
},
7777
{
7878
accessorKey: 'secret',
79-
header: '连接密钥',
79+
header: '连接密钥(点击查看启动命令)',
8080
cell: ({ row }) => {
8181
const client = row.original
8282
return <ClientSecret client={client} />
@@ -161,20 +161,13 @@ export const ClientSecret = ({ client }: { client: ClientTableSchema }) => {
161161
<div
162162
onMouseEnter={() => setShowSecrect(true)}
163163
onMouseLeave={() => setShowSecrect(false)}
164-
onClick={() => {
165-
if (platformInfo) {
166-
navigator.clipboard.writeText(ExecCommandStr('client', client, platformInfo))
167-
toast({ description: '复制成功' })
168-
} else {
169-
toast({ description: '获取平台信息失败' })
170-
}
171-
}}
172164
className="font-medium hover:rounded hover:bg-slate-100 p-2 font-mono whitespace-nowrap"
173165
>
174166
{showSecrect ? client.secret : fakeSecret}
175167
</div>
176168
</PopoverTrigger>
177-
<PopoverContent className="w-fit overflow-auto max-w-48">
169+
<PopoverContent className="w-fit overflow-auto max-w-80">
170+
<div>运行命令(需要<a className='text-blue-500' href='https://github.com/VaalaCat/frp-panel/releases'>点击这里</a>自行下载文件)</div>
178171
<div className="p-2 border rounded font-mono w-fit">
179172
{platformInfo === undefined ? '获取平台信息失败' : ExecCommandStr('client', client, platformInfo)}
180173
</div>
@@ -231,23 +224,27 @@ export const ClientActions: React.FC<ClientItemProps> = ({ client, table }) => {
231224
<DropdownMenuLabel>操作</DropdownMenuLabel>
232225
<DropdownMenuItem
233226
onClick={() => {
234-
if (platformInfo) {
235-
navigator.clipboard.writeText(ExecCommandStr('client', client, platformInfo))
236-
toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
237-
} else {
227+
try {
228+
if (platformInfo) {
229+
navigator.clipboard.writeText(ExecCommandStr('client', client, platformInfo))
230+
toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
231+
} else {
232+
toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
233+
}
234+
} catch (error) {
238235
toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
239236
}
240237
}}
241238
>
242-
复制启动命令
239+
复制启动命令(也可点击列表中的密钥查看)
243240
</DropdownMenuItem>
244241
<DropdownMenuSeparator />
245242
<DropdownMenuItem
246243
onClick={() => {
247244
router.push({ pathname: '/clientedit', query: { clientID: client.id } })
248245
}}
249246
>
250-
修改
247+
修改客户端配置
251248
</DropdownMenuItem>
252249
<DialogTrigger asChild>
253250
<DropdownMenuItem className="text-destructive">删除</DropdownMenuItem>

‎www/components/frpc_card.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,10 @@ export const FRPCFormCard: React.FC<FRPCFormCardProps> = ({
7373
<Card className="w-full">
7474
<CardHeader>
7575
<CardTitle>编辑隧道</CardTitle>
76-
<CardDescription>选择客户端和服务端以编辑隧道</CardDescription>
76+
<CardDescription>
77+
<div>注意⚠️：选择的「服务端」必须提前配置！</div>
78+
<div>选择客户端和服务端以编辑隧道</div>
79+
</CardDescription>
7780
</CardHeader>
7881
<CardContent>
7982
<div className=" flex items-center space-x-4 rounded-md border p-4">

‎www/components/frpc_form.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID }) => {
123123
<Accordion type="single" collapsible key={clientID + serverID + client}>
124124
<AccordionItem value="proxies">
125125
<AccordionTrigger>
126-
<AccordionHeader className="flex flex-row justify-between">代理配置</AccordionHeader>
126+
<AccordionHeader className="flex flex-row justify-between">代理配置(点击展开)</AccordionHeader>
127127
</AccordionTrigger>
128128
<AccordionContent className="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-4">
129129
{clientProxyConfigs.map((item) => {
@@ -188,7 +188,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID }) => {
188188
})}
189189
</AccordionContent>
190190
</AccordionItem>
191-
<AccordionItem value="visitors">
191+
{/* <AccordionItem value="visitors">
192192
<AccordionTrigger>
193193
<AccordionHeader className="flex flex-row justify-between">Visitor 配置</AccordionHeader>
194194
</AccordionTrigger>
@@ -254,7 +254,7 @@ export const FRPCForm: React.FC<FRPCFormProps> = ({ clientID, serverID }) => {
254254
)
255255
})}
256256
</AccordionContent>
257-
</AccordionItem>
257+
</AccordionItem> */}
258258
</Accordion>
259259
<Button
260260
className="mt-2"

‎www/components/frps_card.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,15 @@ export const FRPSFormCard: React.FC<FRPSFormCardProps> = ({ serverID: defaultSer
5050
<Card className="w-full">
5151
<CardHeader>
5252
<CardTitle>服务端配置</CardTitle>
53-
<CardDescription>选择服务端以管理Frps服务</CardDescription>
53+
<CardDescription>
54+
<div>
55+
注意⚠️：修改服务端配置文件后，服务端<a className='text-red-600'>会退出</a>
56+
<br />如果您使用的是docker容器且启动命令中包含了 --restart=unless-stopped 或 --restart=always 则无需担心。
57+
<br />如果您使用的是systemd安装也无需担心。
58+
</div>
59+
<div>
60+
选择服务端以管理Frps服务
61+
</div></CardDescription>
5462
</CardHeader>
5563
<CardContent>
5664
<div className=" flex items-center space-x-4 rounded-md border p-4">

‎www/components/server_item.tsx‎

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export type ServerTableSchema = {
4646
export const columns: ColumnDef<ServerTableSchema>[] = [
4747
{
4848
accessorKey: 'id',
49-
header: 'ID',
49+
header: 'ID(点击查看安装命令)',
5050
cell: ({ row }) => {
5151
return <ServerID server={row.original} />
5252
},
@@ -86,7 +86,7 @@ export const columns: ColumnDef<ServerTableSchema>[] = [
8686
},
8787
{
8888
accessorKey: 'secret',
89-
header: '连接密钥',
89+
header: '连接密钥(点击查看启动命令)',
9090
cell: ({ row }) => {
9191
const Server = row.original
9292
return <ServerSecret server={Server} />
@@ -172,20 +172,13 @@ export const ServerSecret = ({ server }: { server: ServerTableSchema }) => {
172172
<div
173173
onMouseEnter={() => setShowSecrect(true)}
174174
onMouseLeave={() => setShowSecrect(false)}
175-
onClick={() => {
176-
if (platformInfo) {
177-
navigator.clipboard.writeText(ExecCommandStr('server', server, platformInfo))
178-
toast({ description: '复制成功' })
179-
} else {
180-
toast({ description: '获取平台信息失败' })
181-
}
182-
}}
183175
className="font-medium hover:rounded hover:bg-slate-100 p-2 font-mono whitespace-nowrap"
184176
>
185177
{showSecrect ? server.secret : fakeSecret}
186178
</div>
187179
</PopoverTrigger>
188180
<PopoverContent className="w-fit overflow-auto max-w-48">
181+
<div>运行命令(需要<a className='text-blue-500' href='https://github.com/VaalaCat/frp-panel/releases'>点击这里</a>自行下载文件)</div>
189182
<div className="p-2 border rounded font-mono w-fit">
190183
{platformInfo === undefined ? '获取平台信息失败' : ExecCommandStr('server', server, platformInfo)}
191184
</div>
@@ -241,15 +234,19 @@ export const ServerActions: React.FC<ServerItemProps> = ({ server, table }) => {
241234
<DropdownMenuLabel>操作</DropdownMenuLabel>
242235
<DropdownMenuItem
243236
onClick={() => {
244-
if (platformInfo) {
245-
navigator.clipboard.writeText(ExecCommandStr('server', server, platformInfo))
246-
toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
247-
} else {
237+
try {
238+
if (platformInfo) {
239+
navigator.clipboard.writeText(ExecCommandStr('server', server, platformInfo))
240+
toast({ description: '复制成功，如果复制不成功，请点击ID字段手动复制' })
241+
} else {
242+
toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
243+
}
244+
} catch (error) {
248245
toast({ description: '获取平台信息失败，如果复制不成功，请点击ID字段手动复制' })
249246
}
250247
}}
251248
>
252-
复制启动命令
249+
复制启动命令(也可点击列表中的密钥查看)
253250
</DropdownMenuItem>
254251
<DropdownMenuSeparator />
255252
<DropdownMenuItem
@@ -262,7 +259,7 @@ export const ServerActions: React.FC<ServerItemProps> = ({ server, table }) => {
262259
})
263260
}}
264261
>
265-
修改
262+
修改服务端配置
266263
</DropdownMenuItem>
267264
<DialogTrigger asChild>
268265
<DropdownMenuItem className="text-destructive">删除</DropdownMenuItem>
@@ -271,11 +268,11 @@ export const ServerActions: React.FC<ServerItemProps> = ({ server, table }) => {
271268
</DropdownMenu>
272269
<DialogContent>
273270
<DialogHeader>
274-
<DialogTitle>确定删除该客户端?</DialogTitle>
271+
<DialogTitle>确定删除该服务端?</DialogTitle>
275272
<DialogDescription>
276273
<p className="text-destructive">此操作无法撤消。您确定要永久从我们的服务器中删除该客户端?</p>
277274
<p className="text-gray-500 border-l-4 border-gray-500 pl-4 py-2">
278-
删除后运行中的客户端将无法通过现有参数再次连接，如果您需要删除客户端对外的连接，可以选择清空配置
275+
删除后运行中的服务端将无法通过现有参数再次连接，如果您需要停止服务端的服务，可以选择清空配置
279276
</p>
280277
</DialogDescription>
281278
</DialogHeader>

0 commit comments

Comments
 (0)