SparksFly/Frpilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: 更新项目说明文档、添加界面截图与镜像加速配置

Browse Source 
- 更新 README.md，完善功能特性、技术栈与使用说明
- 添加界面截图到 docs/snipastes 目录
- 配置 Tauri 更新镜像与 GitHub Actions 脚本
- 修正应用名称大小写与更新端点配置
This commit is contained in:
Yuhang Wu
2026-10-14 11:42:07 +08:00
parent bc4da1c7a4
commit cbd5096595
9 changed files with 198 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.github/workflows/release.yml
+47
View File
@@ -9,6 +9,11 @@ on:
permissions:
contents: write # 需要写入权限来创建 Release
env:
# 更新产物镜像前缀：latest.json 里的 GitHub 下载直链会被改写为 <前缀> + 原始直链。
# 更换镜像时，请同步修改 src-tauri/tauri.conf.json 中 updater.endpoints 的镜像地址。
MIRROR_PREFIX: "https://ghproxy.net/"
jobs:
publish-tauri:
strategy:
@@ -132,3 +137,45 @@ jobs:
releaseDraft: true # 先创建草稿，手动确认后再发布
prerelease: false
args: ${{ matrix.args }}
# 所有平台构建完成后，把 latest.json 里的下载直链改写为镜像前缀，
# 让「下载安装包」这一步也走镜像加速（此前只有检查更新走镜像）。
mirror-updater-manifest:
needs: publish-tauri
runs-on: ubuntu-latest
permissions:
contents: write
env:
GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
steps:
- name: Checkout
uses: actions/checkout@v5
- name: Rewrite latest.json download URLs to mirror
run: |
set -euo pipefail
TAG="v$(node -p "require('./package.json').version")"
echo "Release tag: $TAG"
mkdir -p updater
# 从草稿 Release 中取回 tauri-action 生成的更新清单
gh release download "$TAG" --pattern latest.json --dir updater --clobber
node <<'NODE'
const fs = require("fs");
const file = "updater/latest.json";
const prefix = process.env.MIRROR_PREFIX;
const data = JSON.parse(fs.readFileSync(file, "utf8"));
let count = 0;
for (const info of Object.values(data.platforms || {})) {
if (info && typeof info.url === "string" && info.url.startsWith("https://github.com/")) {
info.url = prefix + info.url;
count += 1;
}
}
fs.writeFileSync(file, JSON.stringify(data, null, 2) + "\n");
console.log(`Rewrote ${count} download URL(s) with mirror prefix: ${prefix}`);
NODE
# 覆盖上传（签名针对安装包字节校验，与 URL 无关，改地址不影响更新校验）
gh release upload "$TAG" updater/latest.json --clobber
README.md
+145 -107
View File
@@ -1,56 +1,107 @@
# Frpilot
> 一个基于 **Tauri 2 + Vue 3 + TypeScript** 的 [frp](https://github.com/fatedier/frp) 可视化客户端，帮助用户快速配置 frpc 版本、服务器与隧道。
> 一个基于 **Tauri 2 + Vue 3 + TypeScript** 的 [frp](https://github.com/fatedier/frp) 可视化客户端，帮你用图形界面管理 frpc 版本、服务器与隧道，从此告别手写 `frpc.toml`。
Frpilot 目前处于早期开发阶段，已完成应用骨架（自定义标题栏、多语言、明暗主题、磨砂玻璃布局）。
Frpilot 已从「应用骨架」成长为可用的一体化客户端：下载 frpc、配置服务器、编排隧道、一键启动并实时查看日志，全部在同一个窗口里完成，并内置应用内自动更新。
---
## ✨ 功能特性
## ✨ 已实现功能
### 已实现
### Frpc 版本管理
- **i18n 国际化**：内置简体中文 / English，语言选择持久化，Ant Design Vue 组件库语言包联动
- **自定义标题栏**：按操作系统自动切换
- Windows：左侧 `Frpilot` 标题，右侧「语言 / 明暗 / 设置 / 最小化 / 关闭」
- macOS：左侧红绿灯（关闭 / 最小化 / 最大化），右侧同上一组按钮
- **明暗主题**：基于 `@vueuse/core` 的 `useDark`，Tailwind `dark:` 变体 + Ant Design Vue 暗色算法联动，选择持久化
- **悬浮磨砂玻璃布局**：侧边栏（Aside）与内容区（Content）均为圆角 + `backdrop-filter` 毛玻璃面板
- **侧边栏菜单**：仪表盘 / 服务器 / 隧道列表 / Frpc 下载
- **底部系统信息**：CPU 占用、内存占用（百分比 + 进度条）、运行状态指示点
- 🟢 运行正常 · 🔴 运行异常 · 🟡 未启动
- 在线拉取 Frp 官方版本列表，支持「所有架构 frpc / frps」开关，按平台与架构筛选
- 一键下载并自动解压，实时显示下载 / 解压进度与状态
- 导入本地已有的 `frpc` / `frps`
- 删除已下载版本、复制下载直链
### 规划中
### 服务器管理
- frpc 版本管理与下载
- 服务器（frps）连接配置管理
- 隧道配置的增删改查与启停
- 配置文件的导入 / 导出与校验
- frps 服务器的新增 / 编辑 / 删除
- 服务器地址、端口、鉴权 Token、传输协议、TLS 开关、备注
- 置顶与排序；启用开关（**同一时间仅允许启用一台**服务器）
### 隧道管理
- 覆盖 **TCP / UDP / HTTP / HTTPS / STCP / XTCP / SUDP / TCPMUX** 等代理类型
- 本地 IP / 端口、远程端口、自定义域名、子域名、URL 前缀
- 高级配置：密钥、加密、压缩、带宽限制、Proxy Protocol、健康检查、负载均衡
- 启用 / 置顶 / 排序
### 一键启动与实时日志
- 仪表盘选择 frpc 版本后「一键启动 / 停止」
- 自动依据所选版本、已启用的服务器与隧道生成 `frpc.toml` 并拉起独立进程
- 通过 `frpc-log` / `frpc-exit` 事件实时回显运行日志与进程退出信息
### 仪表盘
- 系统信息：主机名 / 系统 / 架构 / IP 地址
- 服务器与隧道数量统计
- 侧边栏常驻 CPU 占用、内存占用与运行状态指示点（🟢 运行正常 · 🔴 运行异常 · 🟡 未启动）
### 应用内自动更新
- 启动时静默检查，支持手动检查更新
- 更新弹窗以 **Markdown** 渲染更新说明，展示下载进度
- 支持「忽略该版本」、一键更新，安装完成后自动重启
### 关于页面
- 项目介绍、技术栈标签、使用流程指引
- 开源地址一键跳转、当前版本信息与「检查更新」入口
### 界面与体验
- **自定义标题栏**：Windows / macOS 双套方案，窗口可拖拽移动；顶部栏集成语言 / 主题 / 检查更新 / GitHub / 设置与窗口控制按钮
- **macOS 特化**：还原原生红绿灯，隐藏冗余的最小化 / 关闭按钮，禁用 macOS 下不需要的最大化
- **明暗主题**：跟随切换，Tailwind 暗色变体与 Ant Design Vue 暗色算法同步，选择持久化
- **悬浮磨砂玻璃**：侧边栏、内容区与卡片统一为圆角 + `backdrop-filter` 半透明面板
- **国际化**：内置简体中文 / English，语言选择持久化，Ant Design Vue 组件语言包联动
---
## 🖼️ 界面预览
| 仪表盘 | 服务器 |
| --- | --- |
| ![仪表盘](docs/snipastes/仪表盘.webp) | ![服务器](docs/snipastes/服务器.webp) |
| 隧道列表 | Frpc 下载 |
| --- | --- |
| ![隧道列表](docs/snipastes/隧道列表.webp) | ![Frpc 下载](docs/snipastes/frpc下载.webp) |
| 设置 · 外观 | 设置 · 关于 |
| --- | --- |
| ![外观设置](docs/snipastes/设置.webp) | ![关于](docs/snipastes/关于.webp) |
---
## 🧱 技术栈
| 分类 | 选型 |
| ---------- | ---------------------------------------------------------------- |
| 桌面框架 | [Tauri 2](https://v2.tauri.app/)（Rust 后端） |
| 前端框架 | Vue 3（`<script setup>`）+ TypeScript |
| 构建工具 | Vite 8 |
| UI 组件库 | Ant Design Vue 4 + `@ant-design/icons-vue` |
| 样式 | Tailwind CSS 4（原子化）+ SCSS |
| 状态管理 | Pinia |
| 路由 | Vue Router |
| 国际化 | Vue I18n 11 |
| 工具库 | `@vueuse/core` |
| 分类 | 选型 |
| ---------- | --------------------------------------------------------------------- |
| 桌面框架 | [Tauri 2](https://v2.tauri.app/)（Rust 后端） |
| 前端框架 | Vue 3（`<script setup>`）+ TypeScript |
| 构建工具 | Vite 8 |
| UI 组件库 | Ant Design Vue 4 + `@ant-design/icons-vue` |
| 样式 | Tailwind CSS 4（原子化）+ SCSS |
| 状态管理 | Pinia |
| 路由 | Vue Router |
| 国际化 | Vue I18n 11 |
| Markdown | `markdown-it`（更新日志渲染） |
| 工具库 | `@vueuse/core` |
| 后端 | Rust：`sqlx` + SQLite、`reqwest`（下载）、`sysinfo`（系统采集） |
| 插件 | `updater` / `process` / `dialog` / `opener` / `store` / `prevent-default` |
| 自动化 | `unplugin-auto-import`、`unplugin-vue-components`（Antd 按需自动导入） |
---
## 📦 环境要求
- **Node.js** ≥ 18（推荐 20 / 22 LTS）
- **Node.js** ≥ 20（推荐 20 / 22 LTS）
- **pnpm** ≥ 9（项目使用 pnpm，含 `pnpm-lock.yaml`）
- **Rust** 稳定版工具链（`rustup`）
- **Rust** 稳定版工具链（`rustup`，建议 ≥ 1.90）
- **系统依赖**：请参考 [Tauri 前置依赖](https://v2.tauri.app/start/prerequisites/)（Windows 需 WebView2 与 MSVC 构建工具；macOS 需 Xcode Command Line Tools；Linux 需 `webkit2gtk` 等）
---
@@ -61,7 +112,7 @@ Frpilot 目前处于早期开发阶段，已完成应用骨架（自定义标题
# 1. 安装依赖
pnpm install
# 2. 仅启动前端（浏览器调试，窗口控制类操作会安全空转）
# 2. 仅启动前端（浏览器调试，窗口 / 命令类操作会安全空转）
pnpm dev
# 3. 启动完整桌面应用（推荐，含 Rust 后端）
@@ -70,12 +121,12 @@ pnpm tauri dev
### 常用脚本
| 命令 | 说明 |
| ---------------- | -------------------------------------------------------- |
| `pnpm dev` | 启动 Vite 开发服务器（端口 `1420`） |
| `pnpm tauri dev` | 启动 Tauri 桌面开发环境（自动拉起前端） |
| `pnpm build` | 类型检查（`vue-tsc --noEmit`）+ 构建前端产物到 `dist/` |
| `pnpm preview` | 预览前端构建产物 |
| 命令 | 说明 |
| ------------------ | ------------------------------------------------------ |
| `pnpm dev` | 启动 Vite 开发服务器（端口 `1420`） |
| `pnpm tauri dev` | 启动 Tauri 桌面开发环境（自动拉起前端） |
| `pnpm build` | 类型检查（`vue-tsc --noEmit`）+ 构建前端产物到 `dist/` |
| `pnpm preview` | 预览前端构建产物 |
| `pnpm tauri build` | 打包生成各平台安装包 |
> ⚠️ `pnpm dev` 的端口固定为 `1420` 且 `strictPort: true`，占用时会直接报错退出。
@@ -86,40 +137,39 @@ pnpm tauri dev
```
Frpilot/
├── src/
│ ├── api/ # 接口封装（预留）
│ ├── assets/
│ │ └── main.css # Tailwind 入口 + 全局样式（.glass-panel / dark 变体）
│ ├── components/ # 通用组件
│ │ ├── TitleBarActions.vue # 标题栏右侧按钮组（语言/主题/设置/最小化/关闭）
│ │ ├── WindowsTitleBar.vue # Windows 自定义标题栏
│ │ └── MacTitleBar.vue # macOS 自定义标题栏（红绿灯）
│ ├── composables/
│ │ ├── usePlatform.ts # 操作系统类型判断
│ │ └── useSystemStats.ts # CPU / 内存占用采集
│ ├── i18n/
│ │ ├── index.ts # createI18n 初始化
│ │ └── locales/
│ │ ├── zh-CN.json # 中文语言包
│ │ └── en-US.json # 英文语言包
│ ├── layout/
│ │ ├── Layout.vue # 整体布局（背景 + Header + Aside + Content）
│ │ ├── aside/Aside.vue # 侧边栏（菜单 + 系统信息）
│ │ └── header/Header.vue # 顶部栏（按系统加载 TitleBar）
│ ├── router/router.ts # 路由表
│ ├── stores/app.ts # 全局状态：语言 / 主题 / 运行状态
│ ├── types/ # 自动生成的类型声明
│ ├── utils/window.ts # Tauri 窗口控制封装
│ ├── views/ # 页面（仪表盘 / 服务器 / 隧道 / 下载）
│ ├── App.vue # ConfigProvider（语言 + 主题）
│ └── main.ts # 应用入口
├── src-tauri/ # Rust 后端
│ ├── src/lib.rs # 命令注册入口
│ ├── capabilities/default.json# 权限声明（窗口控制等）
│ └── tauri.conf.json # Tauri 配置（无边框窗口 1100×720）
├── src/ # 前端（Vue 3 + TypeScript）
│ ├── api/ # Tauri 命令封装（frp / server / tunnel / system / updater）
│ ├── assets/main.css # Tailwind 入口 + 全局样式（磨砂玻璃 / Markdown / 弹窗）
│ ├── components/ # 通用组件
│ │ ├── frp/FrpCard.vue
│ │ ├── server/ServerCard.vue · ServerFormModal.vue
│ │ ├── tunnel/TunnelCard.vue · TunnelFormModal.vue
│ │ ├── WindowsTitleBar.vue · MacTitleBar.vue · TitleBarActions.vue
│ │ ├── UpdateModal.vue # 更新弹窗（Markdown 更新日志 + 进度）
│ │ └── MarkdownBlock.vue # Markdown 渲染
│ ├── composables/ # usePlatform · useSystemStats
│ ├── config/backgrounds.ts # 内置窗口背景图
│ ├── i18n/ # 国际化（zh-CN / en-US）
│ ├── layout/ # 主布局 + 标题栏 + 侧边栏
│ ├── router/router.ts # 路由表
│ ├── stores/ # app · frpc · update（Pinia）
│ ├── types/ # 自动生成的类型声明与领域类型
│ ├── utils/ # window（窗口控制）· markdown（渲染）
│ └── views/ # 页面（仪表盘 / 服务器 / 隧道 / 下载 / 设置）
├── src-tauri/ # 后端（Rust）
│ ├── src/
│ │ ├── commands/ # Tauri 命令（frp / runner / server / system / tunnel）
│ │ ├── services/ # 数据库 / frpc.toml 生成 / 进程管理 / 系统采集
│ │ ├── models.rs # ApiResponse / PageResult 等通用模型
│ │ └── lib.rs # 应用入口与命令注册
│ ├── capabilities/default.json # 权限声明（窗口控制 / updater / process 等）
│ └── tauri.conf.json # Tauri 配置（无边框窗口 1100×720）
├── docs/
│ ├── CHANGELOG.md # 版本更新日志（发布流程会读取）
│ └── snipastes/ # 界面截图
├── .github/workflows/release.yml # 多平台发布工作流
├── index.html
├── vite.config.ts # 别名 / 自动导入 / Tailwind 插件
├── vite.config.ts # 别名 / 自动导入 / Tailwind 插件
└── package.json
```
@@ -158,7 +208,7 @@ const { t } = useI18n()
### 新增侧边栏菜单项与页面
1. 在 `src/views/` 新建页面组件。
2. 在 `src/router/router.ts` 的 `Layout` 子路由中注册（路径需以 `/` 开头，与菜单 `key` 一致）。
2. 在 `src/router/router.ts` 的 `Layout` 子路由中注册（路径与菜单 `key` 一致）。
3. 在 `src/layout/aside/Aside.vue` 的 `menuItems` 中追加一项（`key` = 路由路径）。
4. 在语言包中补充对应 `menu.*` 文案。
@@ -168,48 +218,36 @@ const { t } = useI18n()
- Tailwind 使用 class 策略：在 `src/assets/main.css` 中已声明 `@custom-variant dark`。
- Ant Design Vue 主题在 `src/App.vue` 中通过 `a-config-provider` 的 `theme.algorithm` 联动。
### 玻璃拟态样式
### 磨砂玻璃样式
`src/assets/main.css` 中的 `.glass-panel` 为通用毛玻璃面板，直接给元素加 `class="glass-panel"` 即可（已含暗色适配）。
`src/assets/main.css` 中的 `.glass-panel`（面板）与 `.glass-card`（卡片）为通用毛玻璃样式，直接加类名即可（已含暗色适配）。
### 接入真实的 CPU / 内存占用
### Markdown 渲染
`src/composables/useSystemStats.ts` 会优先调用 Tauri 命令 `get_system_info`，在命令不存在时回退到**模拟数据**。接入真实数据只需在 Rust 端实现该命令：
```rust
// src-tauri/src/lib.rs
#[tauri::command]
fn get_system_info() -> serde_json::Value {
// 返回 { "cpu": f64, "memory": f64 }，单位为百分比
serde_json::json!({ "cpu": 12.0, "memory": 45.0 })
}
pub fn run() {
tauri::Builder::default()
.plugin(tauri_plugin_opener::init())
.invoke_handler(tauri::generate_handler![get_system_info])
.run(tauri::generate_context!())
.expect("error while running tauri application");
}
```
前端会自动切换为真实数据（`isMock` 会变为 `false`）。
### 运行状态指示点
运行状态由 `src/stores/app.ts` 的 `runStatus` 控制，取值：
```ts
type RunStatus = 'running' | 'error' | 'stopped' // 🟢 | 🔴 | 🟡
```
后续接入 frpc 进程状态时，更新该字段即可。
更新日志、说明类富文本统一使用 `src/components/MarkdownBlock.vue`（内部调用 `src/utils/markdown.ts` 的 `renderMarkdown`）。渲染关闭了原始 HTML，并把链接点击接管到系统浏览器打开。
### 窗口控制与权限
- 前端封装：`src/utils/window.ts`（`minimizeWindow` / `toggleMaximizeWindow` / `closeWindow` / `startDragging`），在非 Tauri 环境（浏览器）下自动空转。
- 前端封装：`src/utils/window.ts`（`minimizeWindow` / `toggleMaximizeWindow` / `closeWindow` / `startDragging` 等），在非 Tauri 环境（浏览器）下自动空转。
- 自定义标题栏依赖无边框窗口（`src-tauri/tauri.conf.json` 中 `decorations: false`），拖拽区域通过 `data-tauri-drag-region` 实现。
- 相关权限在 `src-tauri/capabilities/default.json` 中声明（`core:window:allow-minimize`、`allow-close`、`allow-toggle-maximize`、`allow-start-dragging` 等）。**新增窗口 API 调用时需同步补充对应权限**，否则会报 `not allowed` 错误。
- 相关权限在 `src-tauri/capabilities/default.json` 中声明（`core:window:*`、`updater:default`、`process:default` 等）。**新增窗口 / 插件 API 调用时需同步补充对应权限**，否则会报 `not allowed` 错误。
### 发布与自动更新
- 版本号取自 `package.json` 的 `version`（`src-tauri/tauri.conf.json` 引用之），`src-tauri/Cargo.toml` 保持一致。
- 推送 `v*` tag 会触发 `.github/workflows/release.yml`：构建 **Windows x64 / macOS Apple Silicon / Linux x64** 产物，签名生成更新产物与 `latest.json`，并自动从 `docs/CHANGELOG.md` 提取对应版本说明作为 Release 正文。
- 发布前请在 `docs/CHANGELOG.md` 中补上 `## v<版本号>` 段落。
---
## 🗺️ 路线图
- frpc 配置文件的导入 / 导出与校验
- frps 服务端信息的集中管理与状态检测
- 日志持久化与导出
- 系统托盘 / 开机自启 / 关闭到托盘
- 主题跟随系统
- 更多语言与自定义背景
---
@@ -227,4 +265,4 @@ type RunStatus = 'running' | 'error' | 'stopped' // 🟢 | 🔴 | 🟡
## 📄 License
License 待定（待补充）。
本项目基于 [Apache License 2.0](LICENSE) 开源。
docs/snipastes/frpc下载.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 55 KiB

docs/snipastes/仪表盘.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

docs/snipastes/关于.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

docs/snipastes/服务器.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

docs/snipastes/设置.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

docs/snipastes/隧道列表.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 45 KiB

src-tauri/tauri.conf.json
+6 -3
View File
@@ -1,8 +1,8 @@
{
"$schema": "https://schema.tauri.app/config/2",
"productName": "frpilot",
"productName": "Frpilot",
"version": "../package.json",
"identifier": "frpilot",
"identifier": "Frpilot",
"build": {
"beforeDevCommand": "pnpm dev",
"devUrl": "http://localhost:1420",
@@ -41,7 +41,10 @@
"updater": {
"active": true,
"dialog": false,
"endpoints": ["https://ghproxy.net/https://github.com/SparksFly91/Frpilot/releases/latest/download/latest.json"],
"endpoints": [
"https://ghproxy.net/https://github.com/SparksFly91/Frpilot/releases/latest/download/latest.json",
"https://github.com/SparksFly91/Frpilot/releases/latest/download/latest.json"
],
"pubkey": "dW50cnVzdGVkIGNvbW1lbnQ6IG1pbmlzaWduIHB1YmxpYyBrZXk6IEU0REVGMTREODFFOTI2MUEKUldRYUp1bUJUZkhlNU1qRmlPQm5xSmdQd24waFltVmNtTjlUallYVmdva1VGNkp5bTVGcVlsZUgK"
}
}