feat: 重构页面布局为独立磨砂卡片样式并修改数据库文件名

优化说明:
1. 调整多个页面布局,将内容区拆分为独立的磨砂卡片,统一样式规范
2. 修改全局磨砂玻璃面板的透明度,避免阴影叠加导致的灰色遮罩
3. 新增扁平磨砂卡片样式,移除不必要的阴影
4. 将数据库文件名从 reader.db 改为 frpilot.db
5. 更新相关文档说明,同步 UI 修改内容
This commit is contained in:
Yuhang Wu
2026-10-13 14:27:38 +08:00
parent 5fea53aff1
commit 30ddf583e5
9 changed files with 66 additions and 27 deletions
+12 -2
View File
@@ -28,7 +28,7 @@
### 2. 设置页面外观设置
#### 窗口背景设置开发
#### 2.1 窗口背景设置开发
- 我新加了一个设置页面Setting.vue和一个外观设置Appearance.vue文件,帮我在路由表里面增加设置页路由,以及外观设置子路由
- 设置页面左侧为菜单栏,先增加第一项菜单-外观设置,设置项为主题模式切换(明/暗)、背景图片切换
@@ -37,6 +37,14 @@
开发过程中使用到的组件尽可能全部使用Antdv库里面的,另外我引入的有tailwindcss原子化组件,开发之前尽可能先阅读一下package.json,看一下有哪些依赖可以简化代码开发
#### 2.2 UI修改
Layout布局content区域的磨砂玻璃卡片圆角样式我要改动一下:
- 不是在整个main区域设置成glass-panel样式
- 而是在每一个页面单独设置,现在先以服务器配置页面为例,按照我图片中红色框选部分作为区域分割
- 左侧菜单栏已经是glass-panel样式,现在需要在main区域设置成圆角卡片磨砂玻璃效果
### 3. 功能开发
#### 3.1 开发服务器配置功能
@@ -46,4 +54,6 @@
- 页面展示已经配置的服务器列表,列表服务器以卡片形式展示,卡片有开关可以直接操作是否置顶和是否启用,是否启用选项只能启用一个,另外还需要有编辑和删除,新增和编辑使用同一个表单
- 服务器信息在Rust端使用SQLite存储,Rust已经加入相关的sqlx依赖等,后端操作返回前端务必使用ApiResponse统一返回格式,前端也需要做好对应的类型匹配
开发过程中使用到的组件尽可能全部使用Antdv库里面的,另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入,开发之前尽可能先阅读一下package.json,看一下有哪些依赖可以简化代码开发
开发过程中使用到的组件尽可能全部使用Antdv库里面的,另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入,开发之前尽可能先阅读一下package.json,看一下有哪些依赖可以简化代码开发
3.2 开发隧道