feat: 实现仪表盘页面及系统信息采集功能

新增系统信息采集后端服务，引入 sysinfo 依赖获取 CPU、内存、主机名、系统版本、架构和 IP 地址等数据；新增系统相关 API 接口和 TypeScript 类型定义；重构仪表盘页面，整合服务器/隧道数量统计、系统信息展示、资源占用监控和 Frpc 运行日志功能；新增中英文国际化文案支持，完善前端交互逻辑。
2026-10-13 15:56:05 +08:00
parent 487bde5473
commit 50bf5f7e36
16 changed files with 661 additions and 27 deletions
@@ -67,4 +67,20 @@ Layout布局content区域的磨砂玻璃卡片圆角样式我要改动一下：
 - 页面展示已经配置的隧道列表，列表隧道以卡片形式展示，卡片有开关可以直接操作是否置顶和是否启用，隧道可同时启用多个，另外还需要有编辑和删除，新增和编辑使用同一个表单
 - 隧道信息在Rust端使用SQLite存储，Rust已经加入相关的sqlx依赖等，后端操作返回前端务必使用ApiResponse统一返回格式，前端也需要做好对应的类型匹配

-开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发
+开发过程中使用到的组件尽可能全部使用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获取
+- 其余卡片保持不动