feat: 重构页面布局为独立磨砂卡片样式并修改数据库文件名
优化说明: 1. 调整多个页面布局,将内容区拆分为独立的磨砂卡片,统一样式规范 2. 修改全局磨砂玻璃面板的透明度,避免阴影叠加导致的灰色遮罩 3. 新增扁平磨砂卡片样式,移除不必要的阴影 4. 将数据库文件名从 reader.db 改为 frpilot.db 5. 更新相关文档说明,同步 UI 修改内容
This commit is contained in:
+12
-2
@@ -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 开发隧道
|
||||
Reference in New Issue
Block a user