feat: 将卡片和弹窗改为透明磨砂玻璃效果

修改服务器、隧道、Frpc列表卡片及对应弹窗的背景为透明磨砂玻璃样式，同时调整弹窗高度限制为窗口的80%，优化滚动行为。

docs/Frpilot开发提示词.md

@@ -49,6 +49,12 @@ Layout布局content区域的磨砂玻璃卡片圆角样式我要改动一下：
 
 现在的弹窗里面内容比较多的时候会出现弹窗高度超出窗口高度，然后整个弹窗可以滚动，我想要改成弹窗高度不能超过窗口高度的80%，然后弹窗内容较多的时候，滚动仅限于弹窗里面可以进行滚动，按照我的要求修改一下
 
+#### 2.4 弹窗、卡片效果修改
+
+- 服务器列表卡片、新增服务器弹窗的背景效果都改成透明磨砂玻璃效果
+- 隧道列表卡片、新建隧道弹窗的背景效果都改成透明磨砂玻璃效果
+- Frpc下载列表卡片的背景效果都改成透明磨砂玻璃效果
+
 ### 3. 功能开发
 
 #### 3.1 开发服务器配置功能

src/assets/main.css

@@ -85,7 +85,39 @@ body {
 }
 
 /*
- * 表单弹窗通用布局：
+ * 透明磨砂玻璃卡片（服务器 / 隧道 / Frpc 列表卡片）
+ * 叠加在 .glass-panel 之上，用 .ant-card 提升优先级，
+ * 覆盖 Antd 运行时注入的卡片背景与边框（需 !important 才能稳定生效）。
+ */
+.glass-card.ant-card {
+  border: 1px solid rgba(255, 255, 255, 0.5) !important;
+  background: rgba(255, 255, 255, 0.5) !important;
+  backdrop-filter: blur(16px) saturate(160%);
+  -webkit-backdrop-filter: blur(16px) saturate(160%);
+  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.08) !important;
+  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.glass-card.ant-card:hover {
+  border-color: rgba(99, 102, 241, 0.45) !important;
+  background: rgba(255, 255, 255, 0.62) !important;
+  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14) !important;
+}
+
+.dark .glass-card.ant-card {
+  border-color: rgba(255, 255, 255, 0.1) !important;
+  background: rgba(30, 41, 59, 0.5) !important;
+  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35) !important;
+}
+
+.dark .glass-card.ant-card:hover {
+  border-color: rgba(129, 140, 248, 0.5) !important;
+  background: rgba(30, 41, 59, 0.62) !important;
+  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
+}
+
+/*
+ * 表单弹窗通用布局 + 透明磨砂玻璃背景：
  * 1. 弹窗整体高度不超过窗口的 80%；
  * 2. 内容过多时仅弹窗主体（body）滚动，标题与底部按钮固定可见；
  * 3. 只保留纵向滚动条，避免出现横向滚动条。
@@ -99,11 +131,29 @@ body {
   flex-direction: column;
   max-height: 80vh;
   overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  background: rgba(255, 255, 255, 0.62) !important;
+  backdrop-filter: blur(24px) saturate(170%);
+  -webkit-backdrop-filter: blur(24px) saturate(170%);
+  box-shadow: 0 16px 48px rgba(15, 23, 42, 0.18) !important;
 }
 
 .form-modal-wrap .ant-modal-header,
 .form-modal-wrap .ant-modal-footer {
   flex: 0 0 auto;
+  border-color: rgba(15, 23, 42, 0.06);
+  background: transparent !important;
+}
+
+.dark .form-modal-wrap .ant-modal-content {
+  border-color: rgba(255, 255, 255, 0.1);
+  background: rgba(30, 41, 59, 0.62) !important;
+  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5) !important;
+}
+
+.dark .form-modal-wrap .ant-modal-header,
+.dark .form-modal-wrap .ant-modal-footer {
+  border-color: rgba(255, 255, 255, 0.08);
 }
 
 .form-modal-wrap .ant-modal-body {

src/components/frp/FrpCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card class="frp-card" :body-style="{ padding: '16px' }" hoverable>
+  <a-card class="glass-card" :body-style="{ padding: '16px' }" hoverable>
     <!-- 头部：版本 + 状态标签 -->
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0 flex-1">
@@ -162,14 +162,3 @@ function formatDate(value: string) {
   return value ? dayjs(value).format("YYYY-MM-DD") : "-"
 }
 </script>
-
-<style scoped lang="scss">
-.frp-card {
-  border-color: rgba(15, 23, 42, 0.08);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.dark .frp-card {
-  border-color: rgba(255, 255, 255, 0.1);
-}
-</style>

src/components/server/ServerCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card class="server-card" :body-style="{ padding: '16px' }" hoverable>
+  <a-card class="glass-card" :body-style="{ padding: '16px' }" hoverable>
     <!-- 头部：名称 + 状态标签 + 操作 -->
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0 flex-1">
@@ -88,14 +88,3 @@ function onEnabledChange(checked: SwitchValue) {
   emit("toggleEnabled", Boolean(checked))
 }
 </script>
-
-<style scoped lang="scss">
-.server-card {
-  border-color: rgba(15, 23, 42, 0.08);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.dark .server-card {
-  border-color: rgba(255, 255, 255, 0.1);
-}
-</style>

src/components/tunnel/TunnelCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <a-card class="tunnel-card" :body-style="{ padding: '16px' }" hoverable>
+  <a-card class="glass-card" :body-style="{ padding: '16px' }" hoverable>
     <!-- 头部：名称 + 状态标签 + 操作 -->
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0 flex-1">
@@ -112,14 +112,3 @@ function onEnabledChange(checked: SwitchValue) {
   emit("toggleEnabled", Boolean(checked))
 }
 </script>
-
-<style scoped lang="scss">
-.tunnel-card {
-  border-color: rgba(15, 23, 42, 0.08);
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
-
-.dark .tunnel-card {
-  border-color: rgba(255, 255, 255, 0.1);
-}
-</style>