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

feat: 新增设置页面及外观设置功能

Browse Source 
添加了设置页面路由、外观设置子页面，支持主题模式切换和自定义窗口背景图片，新增相关 Rust 后端模块、数据库初始化、多语言文案及配置项，更新 Tauri 配置和项目描述。
This commit is contained in:
Yuhang Wu
2026-10-13 11:15:58 +08:00
parent d4257481f4
commit fd47adea1e
24 changed files with 6673 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/images/bg-1.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

src/assets/images/bg-2.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

src/assets/images/bg-3.webp
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 359 KiB

src/config/backgrounds.ts
+30
View File
@@ -0,0 +1,30 @@
import bg1 from "@/assets/images/bg-1.webp"
import bg2 from "@/assets/images/bg-2.webp"
import bg3 from "@/assets/images/bg-3.webp"
/** 窗口背景图片标识 */
export type BackgroundKey = "none" | "bg-1" | "bg-2" | "bg-3"
export interface BackgroundOption {
/** 唯一标识 */
key: BackgroundKey
/** i18n 文案 key */
label: string
/** 图片地址（Vite 打包后为最终资源路径） */
url: string
}
/** 可选背景列表，新增背景图时在此追加即可 */
export const backgroundOptions: BackgroundOption[] = [
{ key: "none", label: "settings.appearance.none", url: "" },
{ key: "bg-1", label: "settings.appearance.bg1", url: bg1 },
{ key: "bg-2", label: "settings.appearance.bg2", url: bg2 },
{ key: "bg-3", label: "settings.appearance.bg3", url: bg3 },
]
export const DEFAULT_BACKGROUND: BackgroundKey = "none"
/** 根据标识取图片地址 */
export function getBackgroundUrl(key: BackgroundKey): string {
return backgroundOptions.find((item) => item.key === key)?.url ?? ""
}
src/i18n/locales/en-US.json
+18 -1
View File
@@ -34,7 +34,24 @@
},
"settings": {
"title": "Settings",
"placeholder": "The settings page is under construction."
"placeholder": "The settings page is under construction.",
"menu": {
"appearance": "Appearance"
},
"appearance": {
"title": "Appearance",
"subtitle": "Customize the theme mode and window background",
"themeMode": "Theme mode",
"themeModeTip": "Switch between light and dark mode",
"light": "Light",
"dark": "Dark",
"background": "Background image",
"backgroundTip": "Pick an image as the window background. It keeps its original aspect ratio and is never stretched.",
"none": "Default",
"bg1": "Background 1",
"bg2": "Background 2",
"bg3": "Background 3"
}
},
"common": {
"developing": "This feature is under construction"
src/i18n/locales/zh-CN.json
+18 -1
View File
@@ -34,7 +34,24 @@
},
"settings": {
"title": "设置",
"placeholder": "设置页面开发中，敬请期待。"
"placeholder": "设置页面开发中，敬请期待。",
"menu": {
"appearance": "外观设置"
},
"appearance": {
"title": "外观设置",
"subtitle": "自定义窗口的主题模式与背景图片",
"themeMode": "主题模式",
"themeModeTip": "切换窗口的明暗显示模式",
"light": "浅色",
"dark": "深色",
"background": "背景图片",
"backgroundTip": "选择一张图片作为窗口背景，图片保持原始比例自适应，不会变形拉伸",
"none": "默认",
"bg1": "背景一",
"bg2": "背景二",
"bg3": "背景三"
}
},
"common": {
"developing": "功能开发中，敬请期待"
src/layout/Layout.vue
+30 -18
View File
@@ -1,8 +1,8 @@
<template>
<!-- 应用整体：背景渐变 + 悬浮面板 -->
<div class="app-shell flex h-screen w-screen flex-col overflow-hidden">
<!-- 应用整体：背景（渐变 / 图片） + 悬浮面板 -->
<div class="app-shell flex h-screen w-screen flex-col overflow-hidden" :style="shellStyle">
<!-- 顶部自定义 TitleBar -->
<Header @settings="settingsOpen = true" />
<Header @settings="goToSetting" />
<!-- 主体：侧边栏 + 内容区 -->
<div class="flex min-h-0 flex-1 gap-3 px-3 pb-3">
@@ -12,38 +12,50 @@
<router-view />
</main>
</div>
<!-- 设置（占位） -->
<a-modal
v-model:open="settingsOpen"
:title="t('settings.title')"
:footer="null"
centered
>
<a-result status="info" :sub-title="t('settings.placeholder')" />
</a-modal>
</div>
</template>
<script setup lang="ts">
import { useI18n } from "vue-i18n"
import Header from "./header/Header.vue"
import Aside from "./aside/Aside.vue"
import { useAppStore } from "@/stores/app"
const { t } = useI18n()
const settingsOpen = ref(false)
const router = useRouter()
const appStore = useAppStore()
/** 点击标题栏“设置”按钮 → 跳转设置页 */
function goToSetting() {
router.push("/setting")
}
/**
* 选中背景图片时覆盖默认渐变背景。
* `cover` 让图片按原始比例缩放铺满窗口，不会变形拉伸。
*/
const shellStyle = computed(() =>
appStore.backgroundUrl
? {
backgroundImage: `url('${appStore.backgroundUrl}')`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
}
: {},
)
</script>
<style scoped lang="scss">
.app-shell {
background:
background-color: #eef2ff;
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.28), transparent 60%),
radial-gradient(1000px 500px at 110% 10%, rgba(34, 211, 238, 0.28), transparent 55%),
linear-gradient(160deg, #eef2ff 0%, #f8fafc 45%, #eef7ff 100%);
}
.dark .app-shell {
background:
background-color: #0b1220;
background-image:
radial-gradient(1200px 600px at 10% -10%, rgba(99, 102, 241, 0.35), transparent 60%),
radial-gradient(1000px 500px at 110% 10%, rgba(14, 165, 233, 0.28), transparent 55%),
linear-gradient(160deg, #0b1220 0%, #0f172a 45%, #111827 100%);
src/router/router.ts
+15
View File
@@ -32,6 +32,21 @@ const routes: RouteRecordRaw[] = [
component: () => import("@/views/Download.vue"),
meta: { title: "menu.download" },
},
{
path: "setting",
name: "Setting",
component: () => import("@/views/Setting.vue"),
redirect: "/setting/appearance",
meta: { title: "settings.title" },
children: [
{
path: "appearance",
name: "Appearance",
component: () => import("@/views/setting/Appearance.vue"),
meta: { title: "settings.menu.appearance" },
},
],
},
],
},
]
src/stores/app.ts
+17 -1
View File
@@ -2,12 +2,17 @@ import { defineStore } from "pinia"
import zhCN from "ant-design-vue/es/locale/zh_CN"
import enUS from "ant-design-vue/es/locale/en_US"
import { setI18nLanguage, type Language } from "@/i18n"
import {
DEFAULT_BACKGROUND,
getBackgroundUrl,
type BackgroundKey,
} from "@/config/backgrounds"
/** Frpc 运行状态 */
export type RunStatus = "running" | "error" | "stopped"
/**
* 全局应用配置：语言、主题、Frpc 运行状态
* 全局应用配置：语言、主题、窗口背景、Frpc 运行状态
*/
export const useAppStore = defineStore("app", () => {
// 语言（持久化到 localStorage）
@@ -23,6 +28,10 @@ export const useAppStore = defineStore("app", () => {
})
const toggleDark = useToggle(isDark)
// 窗口背景图片（持久化）
const background = useStorage<BackgroundKey>("frpilot:background", DEFAULT_BACKGROUND)
const backgroundUrl = computed(() => getBackgroundUrl(background.value))
// Frpc 运行状态（后续由后端驱动）
const runStatus = ref<RunStatus>("stopped")
@@ -44,13 +53,20 @@ export const useAppStore = defineStore("app", () => {
language.value = language.value === "zh-CN" ? "en-US" : "zh-CN"
}
function setBackground(value: BackgroundKey) {
background.value = value
}
return {
language,
isDark,
toggleDark,
background,
backgroundUrl,
runStatus,
antdLocale,
setLanguage,
toggleLanguage,
setBackground,
}
})
src/types/components.d.ts
Vendored
+3 -7
View File
@@ -12,19 +12,15 @@ export {}
declare module 'vue' {
export interface GlobalComponents {
AButton: typeof import('ant-design-vue/es')['Button']
ACard: typeof import('ant-design-vue/es')['Card']
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
ADivider: typeof import('ant-design-vue/es')['Divider']
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
ALayout: typeof import('ant-design-vue/es')['Layout']
ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AModal: typeof import('ant-design-vue/es')['Modal']
AProgress: typeof import('ant-design-vue/es')['Progress']
AResult: typeof import('ant-design-vue/es')['Result']
ASpace: typeof import('ant-design-vue/es')['Space']
ASegmented: typeof import('ant-design-vue/es')['Segmented']
MacTitleBar: typeof import('./../components/MacTitleBar.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
src/views/Setting.vue
+61
View File
@@ -0,0 +1,61 @@
<template>
<div class="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
class="setting-menu"
mode="inline"
:selected-keys="selectedKeys"
:items="menuItems"
@click="onMenuClick"
/>
</aside>
<!-- 右侧：设置内容 -->
<section class="min-w-0 flex-1 overflow-y-auto p-6">
<router-view />
</section>
</div>
</template>
<script setup lang="ts">
import { h } from "vue"
import { BgColorsOutlined } from "@ant-design/icons-vue"
import { useI18n } from "vue-i18n"
import type { MenuProps } from "ant-design-vue"
const { t } = useI18n()
const route = useRoute()
const router = useRouter()
const selectedKeys = computed(() => [route.path])
const menuItems = computed<MenuProps["items"]>(() => [
{
key: "/setting/appearance",
icon: () => h(BgColorsOutlined),
label: t("settings.menu.appearance"),
},
])
const onMenuClick: MenuProps["onClick"] = ({ key }) => {
router.push(String(key))
}
</script>
<style scoped lang="scss">
/* 让设置菜单透明化，融入磨砂玻璃面板 */
.setting-menu {
background: transparent;
&.ant-menu-inline {
border-inline-end: none;
}
:deep(.ant-menu-item) {
border-radius: 10px;
margin-inline: 0;
width: 100%;
}
}
</style>
src/views/setting/Appearance.vue
+108
View File
@@ -0,0 +1,108 @@
<template>
<div class="max-w-2xl">
<h2 class="mb-1 text-lg font-semibold">{{ t("settings.appearance.title") }}</h2>
<p class="mb-6 text-xs opacity-60">{{ t("settings.appearance.subtitle") }}</p>
<!-- 主题模式 -->
<section class="mb-6">
<div class="mb-2 text-sm font-medium">{{ t("settings.appearance.themeMode") }}</div>
<a-segmented v-model:value="themeMode" :options="themeOptions" block />
<p class="mt-2 text-xs opacity-60">{{ t("settings.appearance.themeModeTip") }}</p>
</section>
<a-divider />
<!-- 背景图片 -->
<section>
<div class="mb-1 text-sm font-medium">{{ t("settings.appearance.background") }}</div>
<p class="mb-3 text-xs opacity-60">{{ t("settings.appearance.backgroundTip") }}</p>
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4">
<a-card v-for="bg in backgroundOptions" :key="bg.key" hoverable size="small"
class="bg-card overflow-hidden" :class="{ 'bg-card--active': appStore.background === bg.key }"
:body-style="{ padding: '8px 10px' }" @click="selectBackground(bg.key)">
<template #cover>
<div v-if="bg.url" class="bg-thumb" :style="{ backgroundImage: `url('${bg.url}')` }" />
<div v-else class="bg-thumb bg-thumb--none" />
</template>
<div class="flex items-center justify-between gap-1 text-xs">
<span class="truncate">{{ t(bg.label) }}</span>
<CheckCircleFilled v-if="appStore.background === bg.key" class="shrink-0 text-[#6366f1]" />
</div>
</a-card>
</div>
</section>
</div>
</template>
<script setup lang="ts">
import { h } from "vue"
import { BulbFilled, BulbOutlined, CheckCircleFilled } from "@ant-design/icons-vue"
import { useI18n } from "vue-i18n"
import { backgroundOptions, type BackgroundKey } from "@/config/backgrounds"
import { useAppStore } from "@/stores/app"
const { t } = useI18n()
const appStore = useAppStore()
/** 主题模式：与 store 中的 isDark 双向绑定 */
const themeMode = computed({
get: () => (appStore.isDark ? "dark" : "light"),
set: (value: string | number) => {
appStore.isDark = value === "dark"
},
})
const themeOptions = computed(() => [
{
value: "light",
label: h("span", { class: "inline-flex items-center gap-2" }, [
h(BulbOutlined),
t("settings.appearance.light"),
]),
},
{
value: "dark",
label: h("span", { class: "inline-flex items-center gap-2" }, [
h(BulbFilled),
t("settings.appearance.dark"),
]),
},
])
function selectBackground(key: BackgroundKey) {
appStore.setBackground(key)
}
</script>
<style scoped lang="scss">
.bg-card {
cursor: pointer;
border-color: rgba(15, 23, 42, 0.08);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.dark .bg-card {
border-color: rgba(255, 255, 255, 0.1);
}
.bg-card--active {
border-color: #6366f1 !important;
box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.35);
}
/* 缩略图：保持比例，不拉伸 */
.bg-thumb {
height: 72px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bg-thumb--none {
background-image: repeating-linear-gradient(45deg,
rgba(148, 163, 184, 0.25) 0 8px,
transparent 8px 16px);
}
</style>