Frpilot/docs/Frpilot开发提示词.md

# Frpilot开发提示词

## 背景

> 该项目使用Tauri2 + Vue3为主要技术栈，主要解决Frpc配置繁琐的问题，方便用户快速配置frpc版本、隧道、服务器等
>
> UI库：Antdv

## 阶段提示词

### 1. Layout布局

本项目打算做一个Frpc的可视化客户端，方便用户快速配置frpc版本、隧道、服务器等，现在帮我完成以下功能：

1. i18n国际化初始化配置
   - 在locales目录中写多语言翻译json文件，初步支持中文和英文
2. TitleBar页面开发
   - 开发不同操作系统类型的自定义titlebar
   - Windows系统的TitleBar最左侧显示Frpilot标题，右侧显示语言切换、明暗切换、设置、最小化、关闭，按照顺序展示；
   - Mac系统的TitleBar最左侧显示红绿灯操作，右侧显示语言切换、明暗切换、设置、最小化、关闭，按照顺序展示；
3. Layout页面布局开发
   - Aside侧边栏开发，在Aside.vue文件里面编写，左侧菜单初步暂定为仪表盘、服务器、隧道列表、Frpc下载
   - Aside侧边栏最底部显示CPU占用（百分比）、内存占用（百分比）、运行状态（绿色点运行正常，红色点运行异常，黄色点未启动），跟上方的菜单有间隔
   - Header顶部栏，根据操作系统类型引入components里面的WindowsTitleBar.vue或MacTitleBar.vue
4. Layout布局的side、content区域全部采用圆角矩形、类似于悬浮磨砂玻璃效果

开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发

### 2. 设置页面外观设置

#### 2.1 窗口背景设置开发

- 我新加了一个设置页面Setting.vue和一个外观设置Appearance.vue文件，帮我在路由表里面增加设置页路由，以及外观设置子路由
- 设置页面左侧为菜单栏，先增加第一项菜单-外观设置，设置项为主题模式切换（明/暗）、背景图片切换

- 背景图片使用assets/images目录中的bg-1.png、bg-2.jpg、bg-3.png作为窗口背景图片，在设置页面里面可以选择其中一个切换页面背景，注意尽可能保持原图片的比例大小不发生拉伸

开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发

#### 2.2 UI修改

Layout布局content区域的磨砂玻璃卡片圆角样式我要改动一下：

- 不是在整个main区域设置成glass-panel样式
- 而是在每一个页面单独设置，现在先以服务器配置页面为例，按照我图片中红色框选部分作为区域分割
- 左侧菜单栏已经是glass-panel样式，现在需要在main区域设置成圆角卡片磨砂玻璃效果

#### 2.3 弹窗修改

现在的弹窗里面内容比较多的时候会出现弹窗高度超出窗口高度，然后整个弹窗可以滚动，我想要改成弹窗高度不能超过窗口高度的80%，然后弹窗内容较多的时候，滚动仅限于弹窗里面可以进行滚动，按照我的要求修改一下

### 3. 功能开发

#### 3.1 开发服务器配置功能

- Servers.vue页面右上方一个增加和刷新按钮，点击增加，弹窗填写服务器表单信息
- 服务器信息有名称、IP地址、端口号（默认7000）、备注、排序、是否置顶、是否启用等，这些是我能想到的字段，你需要按照Frpc配置的需要，决定是否增加新的字段，表单需要做必填检验
- 页面展示已经配置的服务器列表，列表服务器以卡片形式展示，卡片有开关可以直接操作是否置顶和是否启用，是否启用选项只能启用一个，另外还需要有编辑和删除，新增和编辑使用同一个表单
- 服务器信息在Rust端使用SQLite存储，Rust已经加入相关的sqlx依赖等，后端操作返回前端务必使用ApiResponse统一返回格式，前端也需要做好对应的类型匹配

开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发

#### 3.2 开发隧道列表功能

- Tunnels.vue页面右上方一个增加和刷新按钮，点击增加，弹窗填写隧道表单信息
- 隧道信息有名称、代理类型、本地IP、本地端口、远程端口、是否置顶、是否启用等，这些是我之前使用Frpc的时候常用的配置字段，你需要按照Frpc配置的需要，决定是否增加新的字段，表单需要做必填检验，如果你增加的是不常用的字段或者是更高级别的设置，可以用折叠面板作为高级设置，将这些更高级的字段放入
- 页面展示已经配置的隧道列表，列表隧道以卡片形式展示，卡片有开关可以直接操作是否置顶和是否启用，隧道可同时启用多个，另外还需要有编辑和删除，新增和编辑使用同一个表单
- 隧道信息在Rust端使用SQLite存储，Rust已经加入相关的sqlx依赖等，后端操作返回前端务必使用ApiResponse统一返回格式，前端也需要做好对应的类型匹配

开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发

#### 3.3 仪表盘页面开发

按照我给的图片布局开发仪表盘页面

- 三个卡片分别展示服务器数量、隧道数量、CPU/内存/运行状态，每个卡片都需要圆角磨砂玻璃效果
- 三个卡片下方是快速操作，可以选择已下载的Frpc版本，右侧按钮一键启动或停止，Frpc下载功能暂未实现，先用模拟数据展示
- 快速操作下方是Frpc运行实时日志展示，也先使用模拟数据展示

开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发

##### 3.3.1 仪表盘页面调整

- 三个卡片当中的服务器数量和隧道数量合并到一个卡片里面，这一个卡片里面上方展示服务器数量，下方展示隧道数量
- 原本的隧道数量卡片改为展示当前运行系统主机名、系统架构、IP地址等，通过Rust端sysinfo获取
- 其余卡片保持不动

#### 3.4 Frpc下载功能开发

- frp的GitHub仓库地址是https://github.com/fatedier/frp
- 初始化一张表，用来保存已下载的Frpc版本和保存路径等信息，已下载的Frpc在获取到的列表里面展示为已下载等标记
- 考虑到国内网络环境访问GitHub不稳定，所以拉取Frpc版本和下载的时候使用GitHub 镜像加速，拉取Frpc版本和下载的时候，需要根据软件运行系统架构展示对应的Frpc版本（默认情况）；
- 页面上方卡片栏里面增加一个开关选项，用于开启是否展示所有架构的Frpc；再增加一个开关选项，用于开启是否展示所有架构的Frps，可以将该软件作为frp下载器使用；再有一个刷新按钮，用于刷新信息；再加一个按钮用于导入本地已下载的Frpc
- 点击卡片上的下载按钮，卡片下方显示一个下载进度的进度条
- 展示获取到的frp数据使用卡片展示，卡片上有对应按钮可以点击进行下载，卡片展示的信息包含frp版本、大小、下载次数、发布日期。在有一个按钮，点击复制下载链接，便于去浏览器等环境下载。再加一个按钮删除已下载的版本

开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发

#### 3.5 完成一键启动和日志实时回显功能

- 选择已下载的Frpc版本，点击一键启动，Rust端根据SQLite中保存并启用的服务器和隧道信息生成frpc.toml文件，然后启动frpc
- 将frpc所在进程与软件主进程分离，避免frpc进程异常导致软件退出
- **绕开 plugin-shell，直接用 Rust 的 `std::process::Command`**

- 将frpc的运行日志实时显示在仪表盘页面的日志区域内，并且可以清楚等
- 仪表盘页面的停止按钮也可以停止frpc服务进程
- frpc启动避免出现frpc运行的黑色窗口

##### 3.5.1 仪表盘功能优化调整

- frpc服务启动后，还可以在下拉列表修改frpc版本，启动后就不能再修改版本，而且下拉列表里面要显示正在使用的frpc版本
- 切换菜单之后再切回仪表盘页面，实时日志内容没了，需要保持实时日志内容不会随页面切换而清空

#### 3.6 自动更新功能开发