Files

T

- 新增 SQLite 服务器表结构及 Rust 后端 CRUD 命令
- 新增前端 API 接口、类型定义及国际化文案
- 新增服务器卡片组件及表单弹窗组件
- 实现服务器列表展示、新增、编辑、删除、置顶、启用等功能
- 处理启用服务器互斥逻辑及前端表单校验

2026-10-13 14:01:02 +08:00

Frpilot开发提示词

背景

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

UI库：Antdv

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

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

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

我新加了一个设置页面Setting.vue和一个外观设置Appearance.vue文件，帮我在路由表里面增加设置页路由，以及外观设置子路由
设置页面左侧为菜单栏，先增加第一项菜单-外观设置，设置项为主题模式切换（明/暗）、背景图片切换
背景图片使用assets/images目录中的bg-1.png、bg-2.jpg、bg-3.png作为窗口背景图片，在设置页面里面可以选择其中一个切换页面背景，注意尽可能保持原图片的比例大小不发生拉伸

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

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