feat: 完成 Frpilot 桌面应用核心布局与多语言支持
实现内容: - 新增多语言支持(中文/英文),包含完整翻译文件 - 适配 Windows 和 macOS 自定义标题栏,支持窗口控制与主题切换 - 新增侧边栏菜单,显示系统 CPU/内存占用与运行状态 - 配置 Tauri 窗口属性与权限,支持窗口拖拽、最大化等操作 - 新增 Pinia 状态管理,处理主题、语言与应用状态 - 新增系统统计数据获取与模拟逻辑,支持 Tauri 后端调用回退 - 新增路由配置,完成页面布局与视图组件初始化
This commit is contained in:
+44
-40
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user