# Redis ProxyPool
有一个用户页面，有独立的 vue 前端和独立的 Fastapi 后端，这个用户页面可以启动停止和管理本机代理池 ["127.0.0.1:9360", ...] 。
用户页面采用 vue3（语法糖） + element-plus + fastapi + pywebview 架构做的一个本地桌面应用。虽然前后端都是在同一台机器上运行，但是考虑到未来可能或做成网页服务，因此代码仍遵循前后端分离。
我们姑且把前后端应用程序当成管理程序，通过 Fastapi / 路径来挂载前端编译好的静态文件，通过 /api 路径来处理前端的交互，
例如： 
- 用户页面管理程序 Server: localhost:5835
- / index.html /assets/* 前端静态文件
- /api/proxy/proxies 查询和管理代理池
- /api/worker/ 管理和查询 worker 状态。  /api/worker/browser_config 修改浏览器路径，用于 worker 的浏览器配置


在另一个独立的项目中，有一个 celery  几个 worker 服务分别运行在不同进程中，在用户页面点击相关按钮，或者跟随用户页面，自启动这些 worker 、celery 、Redis ，具体启动逻辑在用户页面 ui\backend\src\services\celery_worker.py 文件中可以一键启动这些 worker celery。

未来 worker 可能还要扩展到别的电脑，不过现在暂时只有一台电脑。为了控制 worker 的任务启停，对外暴露 API 接口，该接口是 worker\api\search_cli.py 来监听各方的请求，包括用户页面也可以请求，请求接口中像 celery_app.send_task(...) 这样来调用各个 worker。


由于 worker 可能也用到代理池，也可能不用，仅默认使用系统代理池。而代理池又是由用户页面来管理，因此我打算采用 Redis 来作为中央代理池。

虽然我不对外使用，只在私有网络使用。

在用户页面中，哪个地方定期更新代理池比较好？

# proxy manager
为了单一职责，帮我在 ui\backend\src 目录中新建一个类来管理订阅。
一个订阅来自一个 url 链接，该链接会得到一个 yaml 文件。大致内容如下：
```yaml
mixed-port: 9360
allow-lan: false
bind-address: 127.0.0.1
mode: rule
log-level: info
external-controller: 127.0.0.1:9361
proxies:
    - { name: '剩余流量：99.87 GB', type: trojan, server: spde.xn--e6q56cu20k.com, port: 443, password: f5cbdd91-fcfd-413c-8bad-af62aaa3c992, udp: true }
    - { name: '距离下次重置剩余：24 天', type: trojan, server: spde.xn--e6q56cu20k.com, port: 443, password: f5cbdd91-fcfd-413c-8bad-af62aaa3c992, udp: true }
    - { name: 套餐到期：2025-07-25, type: trojan, server: spde.xn--e6q56cu20k.com, port: 443, password: f5cbdd91-fcfd-413c-8bad-af62aaa3c992, udp: true }
    - { name: trojan-测试, type: trojan, server: spde.xn--e6q56cu20k.com, port: 443, password: f5cbdd91-fcfd-413c-8bad-af62aaa3c992, udp: true }
    - { name: 新加坡-vless, type: vless, server: 37.114.53.251, port: 56701, uuid: f5cbdd91-fcfd-413c-8bad-af62aaa3c992, udp: true, tls: true, skip-cert-verify: false, flow: xtls-rprx-vision, client-fingerprint: firefox, servername: addons.mozilla.org, reality-opts: { public-key: sW8BfHeovVzmbFuAnr9nH8oJaKYze6shKoKMdek5ai8, short-id: 792147b8 } }
    - { name: '一元百G：https://fscloud.vip', server: jiedianfsc.fsc.interld123456789.com, port: 24000, ports: 24000-25000, mport: 24000-25000, udp: true, skip-cert-verify: true, sni: 234224.1234567890spcloud.com, type: hysteria2, password: f5cbdd91-fcfd-413c-8bad-af62aaa3c992 }
    - { name: '日本aws - 003', server: jiedianfsc.fsc.interld123456789.com, port: 24000, ports: 24000-25000, mport: 24000-25000, udp: true, skip-cert-verify: true, sni: 234224.1234567890spcloud.com, type: hysteria2, password: f5cbdd91-fcfd-413c-8bad-af62aaa3c992 }
    - { name: '新加坡aws - 003', server: jiedianfsc.fsc.interld123456789.com, port: 26000, ports: 26000-27000, mport: 26000-27000, udp: true, skip-cert-verify: true, sni: 234224.1234567890spcloud.com, type: hysteria2, password: f5cbdd91-fcfd-413c-8bad-af62aaa3c992 }
```
虽然上述是一个默认的 yaml 文件，但是用户可以另存为多个不同的 yaml 文件，只需要修改两个端口 external-controller 、mixed-port ，然后用 {mimo_exe} -f {yaml_file} 就能启动多个代理服务。

管理订阅可能有许多功能：
- 下载订阅文件
- 可以更新订阅的 url 链接，也就是重新下载 订阅文件
- 可以添加、删除、修改代理，也就是另存为多个 yaml 文件
- 可以启动、停止、重启代理，也就是用 {mimo_exe} -f {yaml_file} 启动多个代理服务
- 可以查看代理的状态，是通过 {external-controller} 端口来获取的管理页面:f"https://yacd.metacubex.one/?hostname={host}&port={port}&secret=#/proxies"

路径和文件：
- 根据订阅链接下载的订阅文件可以命名为： f"{hashlib.md5(url.encode()).hexdigest()[:8]}.yaml"，路径可以是 PROXY_POLL_DIR 目录下。例如订阅后，得到文件： {PROXY_POLL_DIR}/5f3b4e06.yaml
- 另存为的 yaml 代理配置文件，可以保存在临时目录，以端口号另存为文件名。例如 {PROXY_POLL_DIR}/temp/9360.yaml、{PROXY_POLL_DIR}/temp/9362.yaml
- 未来计划一个订阅链接对应一个 SubscriptionService ，可以有多个订阅链接。  {PROXY_POLL_DIR}/6137e542.yaml、{PROXY_POLL_DIR}/d92ef962.yaml （当前还不需要）

我可能有描述不完善的地方，你自主根据最佳实践来设计。请继续完善代码。

务必符合最佳软件设计架构，务必符合 Vue3(语法糖) element-plus Fastapi 语法风格。

# Proxy.vue
Proxy.vue 能否点击“代理池”后自动请求 proxy.py 中的 @router.get("/proxies") ，如果结果不是空，则展示到 ProxyPool.vue 表格中。

如果 ProxyPool.vue 表格是空，可以添加代理到表格中，完成添加后才请求 proxy.py 。
- 字段 Port 是可编辑框，类型是数字。每次新建一行代理时，Port 会自动加 2。
- 字段“管理页面”是超链接按钮，会跳转到新窗口
- 字段 Status 是显示状态的文本，可以适当加个图标或颜色区分
全部UI设置完成后，可以点击提交按钮，发送到 proxy.py 覆盖或更新有关字段。

要求：
重构 ProxyPool.vue 代码

务必符合最佳软件设计架构，务必符合 Vue3(语法糖) element-plus Fastapi 语法风格。