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

优化说明：
1. 调整多个页面布局，将内容区拆分为独立的磨砂卡片，统一样式规范
2. 修改全局磨砂玻璃面板的透明度，避免阴影叠加导致的灰色遮罩
3. 新增扁平磨砂卡片样式，移除不必要的阴影
4. 将数据库文件名从 reader.db 改为 frpilot.db
5. 更新相关文档说明，同步 UI 修改内容

docs/Frpilot开发提示词.md

@@ -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 开发服务器配置功能
@@ -47,3 +55,5 @@
 - 服务器信息在Rust端使用SQLite存储，Rust已经加入相关的sqlx依赖等，后端操作返回前端务必使用ApiResponse统一返回格式，前端也需要做好对应的类型匹配
 
 开发过程中使用到的组件尽可能全部使用Antdv库里面的，另外我引入的有tailwindcss原子化组件、auto-import和components依赖可以简化引入，开发之前尽可能先阅读一下package.json，看一下有哪些依赖可以简化代码开发
+
+3.2 开发隧道

src-tauri/src/services/db.rs

@@ -5,7 +5,7 @@ pub async fn init_pool(app: &AppHandle) -> Result<SqlitePool, sqlx::Error> {
     // 数据库文件路径
     let app_dir = app.path().app_data_dir().expect("无法获取APP数据目录");
     std::fs::create_dir_all(&app_dir).unwrap();
-    let db_path = app_dir.join("reader.db");
+    let db_path = app_dir.join("frpilot.db");
     // 初始化数据库连接池
     let options = SqliteConnectOptions::new()
         .filename(&db_path)

src/assets/main.css

@@ -56,6 +56,12 @@ body {
   justify-content: center;
 }
 
+/* 主内容区卡片：去掉投影，避免上下卡片之间的阴影透过半透明背景叠加成灰色遮罩 */
+.glass-panel.glass-panel-flat,
+.dark .glass-panel.glass-panel-flat {
+  box-shadow: none;
+}
+
 /* 窗口圆角固定 8px，与 Windows 11 系统默认圆角保持一致 */
 #app {
   border-radius: 8px;
@@ -66,7 +72,7 @@ body {
 .glass-panel {
   border-radius: 16px;
   border: 1px solid rgba(255, 255, 255, 0.55);
-  background: rgba(255, 255, 255, 0.55);
+  background: rgba(255, 255, 255, 0.35);
   backdrop-filter: blur(18px) saturate(160%);
   -webkit-backdrop-filter: blur(18px) saturate(160%);
   box-shadow: 0 8px 32px rgba(15, 23, 42, 0.12);

src/layout/Layout.vue

@@ -8,7 +8,7 @@
     <div class="flex min-h-0 flex-1 gap-3 px-3 pb-3">
       <Aside />
 
-      <main class="glass-panel min-w-0 flex-1 overflow-y-auto">
+      <main class="min-w-0 flex-1 overflow-hidden">
         <router-view />
       </main>
     </div>

src/views/Dashboard.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="flex h-full flex-col p-6">
+  <div class="flex h-full flex-col gap-3">
-    <h2 class="mb-4 text-lg font-semibold">{{ t("menu.dashboard") }}</h2>
+    <!-- 顶部操作栏（独立磨砂卡片） -->
+    <div class="glass-panel glass-panel-flat flex shrink-0 items-center justify-between gap-3 px-5 py-3">
+      <h2 class="text-lg font-semibold">{{ t("menu.dashboard") }}</h2>
+    </div>
+
+    <!-- 内容区（独立磨砂卡片） -->
+    <div class="glass-panel glass-panel-flat min-h-0 flex-1 overflow-y-auto p-5">
       <a-result status="info" :sub-title="t('common.developing')" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">

src/views/Download.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="flex h-full flex-col p-6">
+  <div class="flex h-full flex-col gap-3">
-    <h2 class="mb-4 text-lg font-semibold">{{ t("menu.download") }}</h2>
+    <!-- 顶部操作栏（独立磨砂卡片） -->
+    <div class="glass-panel glass-panel-flat flex shrink-0 items-center justify-between gap-3 px-5 py-3">
+      <h2 class="text-lg font-semibold">{{ t("menu.download") }}</h2>
+    </div>
+
+    <!-- 内容区（独立磨砂卡片） -->
+    <div class="glass-panel glass-panel-flat min-h-0 flex-1 overflow-y-auto p-5">
       <a-result status="info" :sub-title="t('common.developing')" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">

src/views/Servers.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="flex h-full flex-col gap-4 p-6">
+  <div class="flex h-full flex-col gap-3">
-    <!-- 顶部：标题 + 操作按钮 -->
+    <!-- 顶部操作栏（独立磨砂卡片） -->
-    <div class="flex items-center justify-between gap-3">
+    <div class="glass-panel glass-panel-flat flex shrink-0 items-center justify-between gap-3 px-5 py-3">
       <h2 class="text-lg font-semibold">{{ t("menu.servers") }}</h2>
       <a-space>
         <a-button :loading="loading" :icon="h(ReloadOutlined)" @click="refresh()">
@@ -13,8 +13,9 @@
       </a-space>
     </div>
 
-    <!-- 服务器列表 -->
+    <!-- 内容区（独立磨砂卡片，内部滚动） -->
-    <a-spin :spinning="loading" class="min-h-0 flex-1">
+    <div class="glass-panel glass-panel-flat min-h-0 flex-1 overflow-y-auto p-5">
+      <a-spin :spinning="loading">
         <a-empty v-if="!servers.length" class="mt-20" :description="t('server.empty')" />
 
         <div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
@@ -23,6 +24,7 @@
             @toggle-pinned="(value) => onTogglePinned(item, value)" />
         </div>
       </a-spin>
+    </div>
 
     <!-- 新增 / 编辑弹窗 -->
     <ServerFormModal v-model:open="modalOpen" :server="editing" @saved="onSaved" />

src/views/Setting.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex h-full min-h-0">
+  <div class="glass-panel flex h-full min-h-0">
     <!-- 左侧：设置菜单 -->
     <aside class="w-44 shrink-0 border-r border-slate-200/70 p-2 dark:border-white/10">
       <a-menu

src/views/Tunnels.vue

@@ -1,8 +1,15 @@
 <template>
-  <div class="flex h-full flex-col p-6">
+  <div class="flex h-full flex-col gap-3">
-    <h2 class="mb-4 text-lg font-semibold">{{ t("menu.tunnels") }}</h2>
+    <!-- 顶部操作栏（独立磨砂卡片） -->
+    <div class="glass-panel glass-panel-flat flex shrink-0 items-center justify-between gap-3 px-5 py-3">
+      <h2 class="text-lg font-semibold">{{ t("menu.tunnels") }}</h2>
+    </div>
+
+    <!-- 内容区（独立磨砂卡片） -->
+    <div class="glass-panel glass-panel-flat min-h-0 flex-1 overflow-y-auto p-5">
       <a-result status="info" :sub-title="t('common.developing')" />
     </div>
+  </div>
 </template>
 
 <script setup lang="ts">