Yuhang Wu
135e465b16
- 新增系统主题模式，支持跟随操作系统明暗主题 - 添加窗口背景遮罩组件，可调节透明度改善对比度 - 实现 Frpc 运行日志按日期持久化到 logs 目录 - 优化侧边栏收起时的系统资源显示样式 - 新增中英文界面的相关翻译文本 - 实现系统资源统计的共享复用，避免重复请求
329 lines
8.7 KiB
Vue
329 lines
8.7 KiB
Vue
<template>
|
||
<!-- 侧边栏：磨砂玻璃悬浮面板 -->
|
||
<aside
|
||
id="app-sidebar"
|
||
class="app-sidebar glass-panel flex shrink-0 flex-col overflow-hidden"
|
||
:class="{ 'is-collapsed': appStore.sidebarCollapsed }"
|
||
:aria-label="t('sidebar.navigation')"
|
||
>
|
||
<!-- 菜单区 -->
|
||
<div class="flex-1 overflow-y-auto p-2">
|
||
<a-menu class="aside-menu" mode="inline" :inline-collapsed="appStore.sidebarCollapsed" :selected-keys="selectedKeys" :items="menuItems" @click="onMenuClick" />
|
||
</div>
|
||
|
||
<!-- 底部系统信息区（与菜单之间有间隔） -->
|
||
<div class="system-panel mt-2 border-t px-2 pb-2 pt-3">
|
||
<div v-if="!appStore.sidebarCollapsed" class="px-1">
|
||
<!-- CPU -->
|
||
<div class="mb-2">
|
||
<div class="mb-1 flex items-center justify-between text-xs">
|
||
<span class="opacity-70">{{ t("system.cpu") }}</span>
|
||
<span class="font-medium tabular-nums">{{ cpu }}%</span>
|
||
</div>
|
||
<a-progress :percent="cpu" :show-info="false" :stroke-color="barColor(cpu)" size="small" />
|
||
</div>
|
||
|
||
<!-- 内存 -->
|
||
<div class="mb-3">
|
||
<div class="mb-1 flex items-center justify-between text-xs">
|
||
<span class="opacity-70">{{ t("system.memory") }}</span>
|
||
<span class="font-medium tabular-nums">{{ memory }}%</span>
|
||
</div>
|
||
<a-progress :percent="memory" :show-info="false" :stroke-color="barColor(memory)" size="small" />
|
||
</div>
|
||
|
||
<!-- 运行状态 -->
|
||
<div class="flex items-center gap-2 text-xs">
|
||
<span class="h-2 w-2 shrink-0 rounded-full" :class="statusDotClass" />
|
||
<span class="opacity-70">{{ t("system.status") }}</span>
|
||
<span class="font-medium">{{ statusText }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div
|
||
v-else
|
||
class="collapsed-system-stats"
|
||
tabindex="0"
|
||
:aria-label="`${t('system.cpu')}: ${cpu}% · ${t('system.memory')}: ${memory}% · ${statusText}`"
|
||
>
|
||
<div class="collapsed-system-metric">
|
||
<span class="collapsed-system-label">CPU</span>
|
||
<span class="collapsed-system-value">{{ cpu }}%</span>
|
||
<span class="collapsed-system-track"><span :style="{ width: `${cpu}%`, backgroundColor: barColor(cpu) }" /></span>
|
||
</div>
|
||
<div class="collapsed-system-metric">
|
||
<span class="collapsed-system-label">MEM</span>
|
||
<span class="collapsed-system-value">{{ memory }}%</span>
|
||
<span class="collapsed-system-track"><span :style="{ width: `${memory}%`, backgroundColor: barColor(memory) }" /></span>
|
||
</div>
|
||
<div class="collapsed-system-status">
|
||
<span class="h-2 w-2 shrink-0 rounded-full" :class="statusDotClass" />
|
||
<span>{{ statusText }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 设置入口（位于运行状态下方） -->
|
||
<div class="system-divider mt-3 border-t pt-2">
|
||
<a-menu
|
||
class="aside-menu"
|
||
mode="inline"
|
||
:inline-collapsed="appStore.sidebarCollapsed"
|
||
:selected-keys="settingSelectedKeys"
|
||
:items="settingItems"
|
||
@click="onMenuClick"
|
||
/>
|
||
<a-tooltip placement="right" :title="collapseLabel">
|
||
<a-button
|
||
class="sidebar-toggle"
|
||
type="text"
|
||
:aria-label="collapseLabel"
|
||
:aria-expanded="!appStore.sidebarCollapsed"
|
||
aria-controls="app-sidebar"
|
||
@click="appStore.sidebarCollapsed = !appStore.sidebarCollapsed"
|
||
>
|
||
<template #icon>
|
||
<MenuUnfoldOutlined v-if="appStore.sidebarCollapsed" />
|
||
<MenuFoldOutlined v-else />
|
||
</template>
|
||
<span v-if="!appStore.sidebarCollapsed">{{ collapseLabel }}</span>
|
||
</a-button>
|
||
</a-tooltip>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { h } from "vue"
|
||
import {
|
||
ApiOutlined,
|
||
CloudServerOutlined,
|
||
DashboardOutlined,
|
||
DownloadOutlined,
|
||
MenuFoldOutlined,
|
||
MenuUnfoldOutlined,
|
||
SettingOutlined,
|
||
} from "@ant-design/icons-vue"
|
||
import { useI18n } from "vue-i18n"
|
||
import type { MenuProps } from "ant-design-vue"
|
||
import { useAppStore } from "@/stores/app"
|
||
import { useSystemStats } from "@/composables/useSystemStats"
|
||
|
||
const { t } = useI18n()
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
const appStore = useAppStore()
|
||
const collapseLabel = computed(() => t(appStore.sidebarCollapsed ? 'sidebar.expand' : 'sidebar.collapse'))
|
||
|
||
const { cpu, memory } = useSystemStats()
|
||
|
||
const selectedKeys = computed(() => [route.path])
|
||
|
||
/** 设置项在运行状态下方独立渲染，子路由（如 /setting/appearance）同样高亮 */
|
||
const settingSelectedKeys = computed(() => (route.path.startsWith("/setting") ? ["/setting"] : []))
|
||
|
||
const menuItems = computed<MenuProps["items"]>(() => [
|
||
{ key: "/dashboard", icon: () => h(DashboardOutlined), label: t("menu.dashboard") },
|
||
{ key: "/servers", icon: () => h(CloudServerOutlined), label: t("menu.servers") },
|
||
{ key: "/tunnels", icon: () => h(ApiOutlined), label: t("menu.tunnels") },
|
||
{ key: "/download", icon: () => h(DownloadOutlined), label: t("menu.download") },
|
||
])
|
||
|
||
const settingItems = computed<MenuProps["items"]>(() => [
|
||
{ key: "/setting", icon: () => h(SettingOutlined), label: t("menu.setting") },
|
||
])
|
||
|
||
const onMenuClick: MenuProps["onClick"] = ({ key }) => {
|
||
router.push(String(key))
|
||
}
|
||
|
||
/** 进度条颜色：低=绿，中=蓝，高=橙/红 */
|
||
function barColor(value: number) {
|
||
if (value >= 85) return "#ef4444"
|
||
if (value >= 60) return "#f59e0b"
|
||
return "#6366f1"
|
||
}
|
||
|
||
const statusDotClass = computed(() => {
|
||
switch (appStore.runStatus) {
|
||
case "running":
|
||
return "bg-green-500 shadow-[0_0_6px_#22c55e]"
|
||
case "error":
|
||
return "bg-red-500 shadow-[0_0_6px_#ef4444]"
|
||
default:
|
||
return "bg-yellow-400"
|
||
}
|
||
})
|
||
|
||
const statusText = computed(() => {
|
||
switch (appStore.runStatus) {
|
||
case "running":
|
||
return t("system.statusRunning")
|
||
case "error":
|
||
return t("system.statusError")
|
||
default:
|
||
return t("system.statusStopped")
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.app-sidebar {
|
||
width: 224px;
|
||
transition: width 200ms ease;
|
||
|
||
&.is-collapsed {
|
||
width: 72px;
|
||
}
|
||
}
|
||
|
||
.sidebar-toggle {
|
||
width: 100%;
|
||
height: 44px;
|
||
border: 0;
|
||
border-radius: 10px;
|
||
}
|
||
|
||
/* 展开时沿用菜单项的左内边距，让折叠操作与“设置”入口排成同一列。 */
|
||
.app-sidebar:not(.is-collapsed) .sidebar-toggle {
|
||
justify-content: flex-start;
|
||
gap: 10px;
|
||
padding-inline: 24px;
|
||
|
||
:deep(.anticon + span) {
|
||
margin-inline-start: 0;
|
||
}
|
||
}
|
||
|
||
/* 折叠时隐藏文字后，按钮和菜单图标都回到侧栏中心。 */
|
||
.app-sidebar.is-collapsed .sidebar-toggle {
|
||
justify-content: center;
|
||
padding-inline: 0;
|
||
}
|
||
|
||
.sidebar-toggle:focus-visible {
|
||
outline: 2px solid #6366f1;
|
||
outline-offset: -2px;
|
||
}
|
||
|
||
.is-collapsed .aside-menu {
|
||
width: 100%;
|
||
border-inline-end: none;
|
||
|
||
:deep(.ant-menu-item) {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding-inline: 0 !important;
|
||
height: 44px;
|
||
line-height: 44px;
|
||
}
|
||
|
||
:deep(.ant-menu-item-icon) {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex: 0 0 16px;
|
||
margin: 0;
|
||
font-size: 16px;
|
||
line-height: 1;
|
||
}
|
||
|
||
:deep(.ant-menu-title-content) {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
@media (prefers-reduced-motion: reduce) {
|
||
.app-sidebar {
|
||
transition: none;
|
||
}
|
||
}
|
||
|
||
.system-panel {
|
||
border-color: rgba(15, 23, 42, 0.08);
|
||
}
|
||
|
||
.collapsed-system-stats {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 2px 0 4px;
|
||
outline: none;
|
||
}
|
||
|
||
.collapsed-system-metric {
|
||
display: flex;
|
||
width: 100%;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 1px;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.collapsed-system-label {
|
||
font-size: 9px;
|
||
opacity: 0.62;
|
||
}
|
||
|
||
.collapsed-system-value {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
font-variant-numeric: tabular-nums;
|
||
}
|
||
|
||
.collapsed-system-track {
|
||
width: 38px;
|
||
height: 2px;
|
||
overflow: hidden;
|
||
border-radius: 999px;
|
||
background: rgba(100, 116, 139, 0.2);
|
||
|
||
> span {
|
||
display: block;
|
||
height: 100%;
|
||
transition: width 200ms ease;
|
||
}
|
||
}
|
||
|
||
.collapsed-system-status {
|
||
display: flex;
|
||
max-width: 100%;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 4px;
|
||
font-size: 9px;
|
||
line-height: 1.2;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.dark .system-panel {
|
||
border-color: rgba(255, 255, 255, 0.08);
|
||
}
|
||
|
||
/* 系统信息与设置入口之间的分隔线 */
|
||
.system-divider {
|
||
border-color: rgba(15, 23, 42, 0.06);
|
||
}
|
||
|
||
.dark .system-divider {
|
||
border-color: rgba(255, 255, 255, 0.06);
|
||
}
|
||
|
||
/* 让 Antd 菜单透明化，融入磨砂玻璃面板 */
|
||
.aside-menu {
|
||
background: transparent;
|
||
|
||
:deep(.ant-menu-item) {
|
||
border-radius: 10px;
|
||
margin-inline: 0;
|
||
width: 100%;
|
||
}
|
||
|
||
&.ant-menu-inline {
|
||
border-inline-end: none;
|
||
}
|
||
}
|
||
</style>
|