SparksFly/Frpilot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
优化说明：
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
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/main.css
+7 -1
View File
@@ -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
+1 -1
View File
@@ -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
+10 -3
View File
@@ -1,7 +1,14 @@
<template>
<div class="flex h-full flex-col p-6">
<h2 class="mb-4 text-lg font-semibold">{{ t("menu.dashboard") }}</h2>
<a-result status="info" :sub-title="t('common.developing')" />
<div class="flex h-full flex-col 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.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>
src/views/Download.vue
+10 -3
View File
@@ -1,7 +1,14 @@
<template>
<div class="flex h-full flex-col p-6">
<h2 class="mb-4 text-lg font-semibold">{{ t("menu.download") }}</h2>
<a-result status="info" :sub-title="t('common.developing')" />
<div class="flex h-full flex-col 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.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>
src/views/Servers.vue
+14 -12
View File
@@ -1,7 +1,7 @@
<template>
<div class="flex h-full flex-col gap-4 p-6">
<!-- 顶部：标题 + 操作按钮 -->
<div class="flex items-center justify-between gap-3">
<div class="flex h-full flex-col 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,16 +13,18 @@
</a-space>
</div>
<!-- 服务器列表 -->
<a-spin :spinning="loading" class="min-h-0 flex-1">
<a-empty v-if="!servers.length" class="mt-20" :description="t('server.empty')" />
<!-- 内容区（独立磨砂卡片，内部滚动） -->
<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">
<ServerCard v-for="item in servers" :key="item.id" :server="item" @edit="openEdit(item)"
@delete="onDelete(item)" @toggle-enabled="(value) => onToggleEnabled(item, value)"
@toggle-pinned="(value) => onTogglePinned(item, value)" />
</div>
</a-spin>
<div v-else class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
<ServerCard v-for="item in servers" :key="item.id" :server="item" @edit="openEdit(item)"
@delete="onDelete(item)" @toggle-enabled="(value) => onToggleEnabled(item, value)"
@toggle-pinned="(value) => onTogglePinned(item, value)" />
</div>
</a-spin>
</div>
<!-- 新增 / 编辑弹窗 -->
<ServerFormModal v-model:open="modalOpen" :server="editing" @saved="onSaved" />
src/views/Setting.vue
+1 -1
View File
@@ -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
+10 -3
View File
@@ -1,7 +1,14 @@
<template>
<div class="flex h-full flex-col p-6">
<h2 class="mb-4 text-lg font-semibold">{{ t("menu.tunnels") }}</h2>
<a-result status="info" :sub-title="t('common.developing')" />
<div class="flex h-full flex-col 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.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>