feat: 完成 Frpilot 桌面应用核心布局与多语言支持

实现内容:
- 新增多语言支持(中文/英文),包含完整翻译文件
- 适配 Windows 和 macOS 自定义标题栏,支持窗口控制与主题切换
- 新增侧边栏菜单,显示系统 CPU/内存占用与运行状态
- 配置 Tauri 窗口属性与权限,支持窗口拖拽、最大化等操作
- 新增 Pinia 状态管理,处理主题、语言与应用状态
- 新增系统统计数据获取与模拟逻辑,支持 Tauri 后端调用回退
- 新增路由配置,完成页面布局与视图组件初始化
This commit is contained in:
Yuhang Wu
2026-10-12 17:54:05 +08:00
parent b885919b1d
commit 9ca10fdd2f
25 changed files with 907 additions and 92 deletions
+44 -40
View File
@@ -1,47 +1,51 @@
<template>
<a-space direction="vertical" :style="{ width: '100%' }" :size="[0, 48]">
<a-layout>
<a-layout-header :style="headerStyle">Header</a-layout-header>
<a-layout>
<a-layout-sider :style="siderStyle">Sider</a-layout-sider>
<a-layout-content :style="contentStyle">Content</a-layout-content>
</a-layout>
<a-layout-footer :style="footerStyle">Footer</a-layout-footer>
</a-layout>
</a-space>
<!-- 应用整体:背景渐变 + 悬浮面板 -->
<div class="app-shell flex h-screen w-screen flex-col overflow-hidden">
<!-- 顶部自定义 TitleBar -->
<Header @settings="settingsOpen = true" />
<!-- 主体:侧边栏 + 内容区 -->
<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">
<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 type { CSSProperties } from 'vue';
const headerStyle: CSSProperties = {
textAlign: 'center',
color: '#fff',
height: 64,
paddingInline: 50,
lineHeight: '64px',
backgroundColor: '#7dbcea',
};
import { useI18n } from "vue-i18n"
import Header from "./header/Header.vue"
import Aside from "./aside/Aside.vue"
const contentStyle: CSSProperties = {
textAlign: 'center',
minHeight: 120,
lineHeight: '120px',
color: '#fff',
backgroundColor: '#108ee9',
};
const siderStyle: CSSProperties = {
textAlign: 'center',
lineHeight: '120px',
color: '#fff',
backgroundColor: '#3ba0e9',
};
const footerStyle: CSSProperties = {
textAlign: 'center',
color: '#fff',
backgroundColor: '#7dbcea',
};
const { t } = useI18n()
const settingsOpen = ref(false)
</script>
<style lang="scss" scoped></style>
<style scoped lang="scss">
.app-shell {
background:
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:
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%);
}
</style>