Files

T

Yuhang Wu 135e465b16 feat: 新增系统主题跟随、窗口遮罩和运行日志持久化

- 新增系统主题模式，支持跟随操作系统明暗主题
- 添加窗口背景遮罩组件，可调节透明度改善对比度
- 实现 Frpc 运行日志按日期持久化到 logs 目录
- 优化侧边栏收起时的系统资源显示样式
- 新增中英文界面的相关翻译文本
- 实现系统资源统计的共享复用，避免重复请求

2026-10-28 10:55:01 +08:00

23 KiB

Raw Blame History

FrpcPilot开发提示词

背景

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

UI库：Antdv

阶段提示词

1. Layout布局

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

i18n国际化初始化配置
- 在locales目录中写多语言翻译json文件，初步支持中文和英文
TitleBar页面开发
- 开发不同操作系统类型的自定义titlebar
- Windows系统的TitleBar最左侧显示FrpcPilot标题，右侧显示语言切换、明暗切换、设置、最小化、关闭，按照顺序展示；
- Mac系统的TitleBar最左侧显示红绿灯操作，右侧显示语言切换、明暗切换、设置、最小化、关闭，按照顺序展示；
Layout页面布局开发
- Aside侧边栏开发，在Aside.vue文件里面编写，左侧菜单初步暂定为仪表盘、服务器、隧道列表、Frpc下载
- Aside侧边栏最底部显示CPU占用（百分比）、内存占用（百分比）、运行状态（绿色点运行正常，红色点运行异常，黄色点未启动），跟上方的菜单有间隔
- Header顶部栏，根据操作系统类型引入components里面的WindowsTitleBar.vue或MacTitleBar.vue
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作为窗口背景图片，在设置页面里面可以选择其中一个切换页面背景，注意尽可能保持原图片的比例大小不发生拉伸

2.2 UI修改

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

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

2.3 弹窗修改

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

2.4 弹窗、卡片效果修改

服务器列表卡片、新增服务器弹窗的背景效果都改成透明磨砂玻璃效果
隧道列表卡片、新建隧道弹窗的背景效果都改成透明磨砂玻璃效果
Frpc下载列表卡片的背景效果都改成透明磨砂玻璃效果

2.5 外观设置新增卡片透明度和弹窗透明度修改

在外观设置新增两个进度条，用于拖动控制卡片磨砂玻璃效果的透明度和弹窗磨砂玻璃效果的透明度
拖动进度条设置透明度的时候可以实时看到效果

2.6 明暗主题切换，部分字体颜色没有跟随主题变化

切换暗色主题之后，部分字体颜色没有随主题切换
仪表盘页面里面，系统信息卡片、CPU和内存占用卡片、frpc版本、实时日志这些卡片里面的字体应该没有随主题变化
服务器页面里面，服务器三个字没有变化颜色
隧道列表页面里面，隧道列表三个字没有改变颜色
Frpc卸载页面里面，Frpc下载、所有架构Frpc、所有架构Frps这些没有改变颜色
侧边栏的CPU/内存占用，状态文字没有改变颜色
设置页面里面也有一些没有随主题改变颜色
整体全部检查并且修复一下

2.7 侧边栏折叠和漫游式引导

侧边导航栏在设置下面增加一个折叠/展开的图标，点击用于控制侧边导航栏的折叠和展开
- 侧边导航栏折叠之后，需要注意折叠之后的图标居中显示，并且鼠标放上去之后的hover效果显示的时候，图标也要在hover效果里面居中
- 官方参考代码如下：

<template>
  <div style="width: 256px">
    <a-button type="primary" style="margin-bottom: 16px" @click="toggleCollapsed">
      <MenuUnfoldOutlined v-if="state.collapsed" />
      <MenuFoldOutlined v-else />
    </a-button>
    <a-menu
      v-model:openKeys="state.openKeys"
      v-model:selectedKeys="state.selectedKeys"
      mode="inline"
      theme="dark"
      :inline-collapsed="state.collapsed"
      :items="items"
    ></a-menu>
  </div>
</template>
<script lang="ts" setup>
import { reactive, watch, h } from 'vue';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from '@ant-design/icons-vue';
const state = reactive({
  collapsed: false,
  selectedKeys: ['1'],
  openKeys: ['sub1'],
  preOpenKeys: ['sub1'],
});
const items = reactive([
  {
    key: '1',
    icon: () => h(PieChartOutlined),
    label: 'Option 1',
    title: 'Option 1',
  },
  {
    key: '2',
    icon: () => h(DesktopOutlined),
    label: 'Option 2',
    title: 'Option 2',
  },
  {
    key: '3',
    icon: () => h(InboxOutlined),
    label: 'Option 3',
    title: 'Option 3',
  },
  {
    key: 'sub1',
    icon: () => h(MailOutlined),
    label: 'Navigation One',
    title: 'Navigation One',
    children: [
      {
        key: '5',
        label: 'Option 5',
        title: 'Option 5',
      },
      {
        key: '6',
        label: 'Option 6',
        title: 'Option 6',
      },
      {
        key: '7',
        label: 'Option 7',
        title: 'Option 7',
      },
      {
        key: '8',
        label: 'Option 8',
        title: 'Option 8',
      },
    ],
  },
  {
    key: 'sub2',
    icon: () => h(AppstoreOutlined),
    label: 'Navigation Two',
    title: 'Navigation Two',
    children: [
      {
        key: '9',
        label: 'Option 9',
        title: 'Option 9',
      },
      {
        key: '10',
        label: 'Option 10',
        title: 'Option 10',
      },
      {
        key: 'sub3',
        label: 'Submenu',
        title: 'Submenu',
        children: [
          {
            key: '11',
            label: 'Option 11',
            title: 'Option 11',
          },
          {
            key: '12',
            label: 'Option 12',
            title: 'Option 12',
          },
        ],
      },
    ],
  },
]);
watch(
  () => state.openKeys,
  (_val, oldVal) => {
    state.preOpenKeys = oldVal;
  },
);
const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
</script>

第一次进入应用时，使用Antdv的漫游式引导组件做一个引导操作
- 漫游式引导的目的是帮助用户快速上手FrpcPilot的功能使用流程
- 配置服务器、创建隧道、下载Frp、仪表盘一键启动这是主要的四步流程，你可以按照这个来做引导
打开应用时，当主界面未显示完整（还是白屏的时候），做一个启动加载动画，显示“FrpcPilot正在启动中”
- 加载动画可以是一圈正在转圈的圆点，圆点大小要有变化，颜色在加载的过程中也可以有变化，最好是做成svg动画的形式，或者你有更好的方案也可以采用

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

3. 功能开发

3.1 开发服务器配置功能

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

3.2 开发隧道列表功能

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

3.3 仪表盘页面开发

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

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

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版本、大小、下载次数、发布日期。在有一个按钮，点击复制下载链接，便于去浏览器等环境下载。再加一个按钮删除已下载的版本

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 自动更新功能开发

设置页增加一个子页面（关于），里面内容是项目介绍、使用流程、GitHub地址、检查更新相关等内容
顶部栏增加一个检查更新图标操作按钮，按钮样式注意风格跟顶部栏统一
顶部栏再增加一个GitHub图标，点击跳转浏览器打开本项目GitHub地址
做一个更新弹窗，弹窗标题是最新版本号，以及一些说明性文字，例如：发现新版本啦等，语气尽量俏皮可爱，二次元语气。弹窗内容是更新日志，注意弹窗高度不能超过窗口高度的60%，如果更新日志内容过多，则在弹窗主内容区域内可以上下滚动。
弹窗底部是忽略该版本、取消、确认更新等操作

3.7 系统托盘功能开发

这是Tauri2文档里面关于系统托盘的指示：https://tauri.app/zh-cn/learn/system-tray/
使用文档中前端的方式开发系统托盘+托盘图标
托盘菜单内容暂定四项，显示窗口、启动穿透、停止穿透、退出。
点击显示窗口，窗口显示
穿透未启动时，停止穿透禁止操作，点击启动穿透，同步仪表盘页面的一键启动操作，启动成功后，启动穿透禁止操作，停止穿透允许操作
穿透启动时，启动穿透禁止操作，停止穿透允许操作，点击停止穿透，同步仪表盘页面的停止操作，停止后，启动穿透允许操作，暂停穿透禁止操作
点击退出，整个程序退出，如果穿透正在启动运行，一并停止并退出软件
点击Header栏里面的关闭按钮，目前是直接退出整个程序，现在改成先出现一个对话框，对话框内有两个单选项分别是最小化到系统托盘、直接退出，如果选择最小化到系统托盘，则保持程序运行状态，隐藏到系统托盘，如果是直接退出，则停止穿透并退出软件（Mac和Windows同步）

3.8 系统托盘图标BUG修改

开发阶段每次修改代码热更新之后，系统托盘图标就会新增一个
需要修复确保只有一个系统托盘图标

3.9 新增常规设置

设置页增加一个子页面-常规，第一项设置内容是关闭行为设置
目前的关闭行为弹窗分为最小化到系统托盘和直接退出两种，需要增加一个单选组，里面是每次询问和保持以上选择（默认每次询问）
每次询问即每次关闭都需要弹窗供用户选择，保持以上选择则是保持用户选择的关闭方式，持久生效
常规设置页面需要同步关闭弹窗里面的内容，使用户可以再次修改设置
常规设置页面再增加一个语言切换设置，保持跟Header栏同步

3.10 Frpc下载页面增加缓存

目前每次进入Frpc下载页面都会重新去获取Frpc的下载列表，在路由表增加一个meta属性用于开关页面是否缓存isCache

使用keep-alive缓存页面组件，避免每次进入都会去请求GitHub，避免触发限流
不需要做持久化缓存，只需要在应用运行时生效即可
应用运行时只有在第一次进入Frpc下载页面的时候采取请求GitHub，后面再切换回Frpc下载页面的时候，因为缓存了组件，所以不必再次获取GitHub，需要刷新的时候由用户手动点击刷新按钮

3.11 自定义背景

外面的背景图片，增加一个自定义，由用户自己选择图片并设置为背景图片，自定义的图片需要保证下次打开软件仍然是这个背景，可以使用Antdv里面的上传组件，或者你有更好的方案可以替换也可以

4. 修改

4.1 项目名称修改

项目名称修改成了FrpcPilot，软件包构建相关的名称也改成这个
界面标题栏相关的也修改成FrpcPilot
其他与项目名称有关的也修改一下

先扫描一下有哪些需要修改的，列一个清单出来，经过我的确认之后再开始修改

4.2 Frpc下载功能修改

保持Frpc下载主要功能不变，现在需要对检索结果进行过滤方面的修改，具体如下：

去掉当前的两个开关选项“所有架构frpc”和“所有架构frps”
换成一个下拉列表，列表值为frp的所有不同架构分类，命名方式为：系统类型+下划线+架构，例如：windows_amd64、darwin_amd64、linux_amd64、linux_arm等等，默认值为当前运行环境操作系统类型和架构，最顶上有一个“全部”选项用来显示所有
如果是选中“全部”，排列顺序为按照frp版本，从高到低显示同一个版本不同系统和架构的frp，再显示低版本的
修改过程中保持主要的下载功能不变，包括加速方案
左侧菜单栏改成Frp下载

4.3 程序运行数据目录

当前软件运行的数据在我这台电脑上都在：C:\Users\OrBit-0297\AppData\Roaming\FrpcPilot这个目录里面，我想要修改为数据保存在软件安装所在目录，例如我这台电脑安装在：D:\software\FrpcPilot，按照以下要求修改数据保存的目录：

数据库文件、下载的frp全部保存在软件安装所在目录里面，并做好分类，例如：db数据库文件放在data目录里面，下载的frp放在frp目录里面，运行frpc生成的toml文件放在run目录里面
程序运行时生成的其他文件等也放在软件安装目录下面
我这样做的目的是假如安装位置不在C盘，就尽量减少C盘的占用，如果本身就安装在C盘的某个位置，上面说的那些文件保存路径也是以软件安装目录为准，避免放在默认目录里面
顺便准备一份迁移脚本，在下一个版本升级的时候便于老版本用户无感迁移之前的数据，注意新安装用户不需要使用这个迁移脚本
- 我想到的方案是脚本，如果你有更好的方案的话，那就采用你的方案，如果没有，就按照我的要求来做，同时你需要考虑到我遗漏的地方
- 数据迁移之后，可能还需要处理数据库中保存的frp软件目录所在位置
- 迁移脚本需要考虑不同操作系统之间的差别
- 或许可以考虑直接把之前的数据目录直接剪切到安装所在目录里面
- 数据迁移之后需要保证功能和已配置的服务器、隧道可以正常启动

4.4 页面UI修改

左侧导航栏里面的CPU和内存占用，在菜单栏折叠起来之后，要显示；目前是鼠标放上去之后才显示，需要改成在折叠之后的菜单栏里面显示，上面显示CPU占用，下面显示内存占用。具体表现为：CPU：换行显示百分比，换行，内存：换行显示百分比，换行，状态。也可以不要CPU：和内存：，只显示百分比，字体可以小一点，但是主要的是占用百分比
CPU和内存占用增加一个缓存，现在存在一个问题是仪表盘页面每次进入都会重新去获取CPU和内存占用，会有1-2s的等待仪表盘页面才显示CPU和内存占用，现在可以增加一个缓存，保持跟左侧菜单栏里面同步
外观设置里面的背景图片，默认的背景颜色，使用ui-ux-pro-max重新设计一个，不要AI常用的渐变色，同时需要主题明暗主题下的不同
- 整体窗口增加一个适应明暗主题变化的一个遮罩，大小是整个窗口的大小，因为目前存在一点问题是有些背景图片的一部分区域的颜色跟顶部栏的操作图标过于接近，导致视觉效果不佳，我想增加一个遮罩来减少一部分影响，遮罩要随明暗主题有反差，确保顶部栏图标的视觉效果，而且遮罩的透明度需要在外观设置里面可以单独调节
- 明暗主题切换增加一个跟随系统
运行日志持久化写入运行目录所在的logs目录里面

23 KiB Raw Blame History