sync dashboard tab

add DockerContainerDetail.vue
implement Docker
2026-04-13 14:55:51 +08:00 · 2026-04-13 14:55:51 +08:00 · 2026-04-13 14:55:50 +08:00 · 2026-04-13 14:55:50 +08:00 · 2026-04-13 14:55:50 +08:00 · 2026-04-13 14:55:50 +08:00
59 changed files with 11949 additions and 218 deletions
--- a/.editorconfig
+++ b/.editorconfig
@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = tab
+indent_size = 4
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API=http://localhost:8091
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -0,0 +1,44 @@
+module.exports = {
+	root: true,
+	env: {
+		browser: true,
+		es2022: true,
+		node: true
+	},
+	extends: [
+		"eslint:recommended",
+		"plugin:vue/vue3-essential",
+		"plugin:@typescript-eslint/recommended",
+		"./.eslintrc-auto-import.json"
+	],
+	parser: "vue-eslint-parser",
+	parserOptions: {
+		parser: "@typescript-eslint/parser",
+		ecmaVersion: "latest",
+		sourceType: "module",
+		extraFileExtensions: [".vue"]
+	},
+	plugins: ["vue", "@typescript-eslint"],
+	rules: {
+		"camelcase": "error",
+		"comma-dangle": ["error", "never"],
+		"eqeqeq": ["error", "always"],
+		"max-len": ["error", { code: 220 }],
+		"no-console": ["warn", { allow: ["warn", "error"] }],
+		"no-debugger": "warn",
+		"no-tabs": ["error", { allowIndentationTabs: true }],
+		"quotes": ["error", "double"],
+		"semi": ["error", "always"],
+		"space-before-function-paren": [
+			"error",
+			{
+				"anonymous": "always",
+				"named": "never",
+				"asyncArrow": "always"
+			}
+		],
+		"vue/multi-word-component-names": "off",
+		"vue/no-v-html": "off",
+		"@typescript-eslint/no-explicit-any": "off"
+	}
+};
--- a/.gitignore
+++ b/.gitignore
@@ -1,228 +1,31 @@
-# ---> Vue
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
+/AGENTS.md
+/.env.production
+/.eslintrc-auto-import.json
+auto-imports.d.ts
+components.d.ts
+/.npmrc

-# TODO: where does this rule come from?
-docs/_book
-
-# TODO: where does this rule come from?
-test/
-
-# ---> Node
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
 lerna-debug.log*
-.pnpm-debug.log*

-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
-.env
-.env.development.local
-.env.test.local
-.env.production.local
-.env.local
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
+node_modules
 dist
+dist-ssr
+*.local

-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v2
-.yarn/cache
-.yarn/unplugged
-.yarn/build-state.yml
-.yarn/install-state.gz
-.pnp.*
-
-# ---> JetBrains
-# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
-# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
-
-# User-specific stuff
-.idea/**/workspace.xml
-.idea/**/tasks.xml
-.idea/**/usage.statistics.xml
-.idea/**/dictionaries
-.idea/**/shelf
-
-# AWS User-specific
-.idea/**/aws.xml
-
-# Generated files
-.idea/**/contentModel.xml
-
-# Sensitive or high-churn files
-.idea/**/dataSources/
-.idea/**/dataSources.ids
-.idea/**/dataSources.local.xml
-.idea/**/sqlDataSources.xml
-.idea/**/dynamic.xml
-.idea/**/uiDesigner.xml
-.idea/**/dbnavigator.xml
-
-# Gradle
-.idea/**/gradle.xml
-.idea/**/libraries
-
-# Gradle and Maven with auto-import
-# When using Gradle or Maven with auto-import, you should exclude module files,
-# since they will be recreated, and may cause churn.  Uncomment if using
-# auto-import.
-# .idea/artifacts
-# .idea/compiler.xml
-# .idea/jarRepositories.xml
-# .idea/modules.xml
-# .idea/*.iml
-# .idea/modules
-# *.iml
-# *.ipr
-
-# CMake
-cmake-build-*/
-
-# Mongo Explorer plugin
-.idea/**/mongoSettings.xml
-
-# File-based project format
-*.iws
-
-# IntelliJ
-out/
-
-# mpeltonen/sbt-idea plugin
-.idea_modules/
-
-# JIRA plugin
-atlassian-ide-plugin.xml
-
-# Cursive Clojure plugin
-.idea/replstate.xml
-
-# SonarLint plugin
-.idea/sonarlint/
-
-# Crashlytics plugin (for Android Studio and IntelliJ)
-com_crashlytics_export_strings.xml
-crashlytics.properties
-crashlytics-build.properties
-fabric.properties
-
-# Editor-based Rest Client
-.idea/httpRequests
-
-# Android studio 3.1+ serialized cache file
-.idea/caches/build_file_checksums.ser
-
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
@@ -1,3 +1,23 @@
 # timi-server

-移动端 NAS 管理
+基于 Vue 3、Vite、TypeScript 和 TDesign Mobile Vue 的移动端 NAS 管理项目基础骨架。
+
+## 当前已完成
+
+- 基础工程配置：Vite、TypeScript、ESLint、Less、自动导入
+- 基础布局结构：`RootLayout`、`MainLayout`、`PageTransition`
+- 基础页面路由：文件管理、服务器状态、文件阅读、系统设置、登录页、占位详情页
+- 基础深色模式适配
+
+## 开发命令
+
+```bash
+npm install
+npm run dev
+npm run build
+npm run lint
+```
+
+## 说明
+
+当前仓库仅完成项目骨架和占位页面，方便后续继续补业务模块，不包含实际接口和业务逻辑。
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<meta name="theme-color" content="#ffffff" />
+		<title>Timi Server</title>
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,46 @@
+{
+	"name": "timi-server",
+	"private": true,
+	"version": "1.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite --host",
+		"build": "vue-tsc --noEmit && vite build",
+		"preview": "vite preview",
+		"lint": "eslint . --ext .ts,.vue",
+		"type-check": "vue-tsc --noEmit"
+	},
+	"dependencies": {
+		"axios": "1.15.0",
+		"less": "^4.3.0",
+		"echarts": "^6.0.0",
+		"vue-echarts": "^8.0.1",
+		"music-metadata-browser": "^2.5.11",
+		"pinia": "^3.0.2",
+		"tdesign-mobile-vue": "^1.13.2",
+		"timi-tdesign-mobile": "0.0.9",
+		"timi-web": "0.0.17",
+		"ts-node": "^10.9.2",
+		"vue": "^3.5.16",
+		"vue-router": "4.5.1",
+		"vue-virtual-scroller": "2.0.0-beta.8"
+	},
+	"devDependencies": {
+		"@tsconfig/node20": "^20.1.4",
+		"@types/node": "^24.2.0",
+		"@typescript-eslint/eslint-plugin": "^8.29.0",
+		"@typescript-eslint/parser": "^8.29.0",
+		"@vitejs/plugin-vue": "^5.2.4",
+		"@vue/compiler-sfc": "^3.5.16",
+		"@vue/eslint-config-typescript": "^14.5.0",
+		"@vue/tsconfig": "^0.7.0",
+		"eslint": "9.26.0",
+		"eslint-plugin-vue": "^9.33.0",
+		"typescript": "~5.8.3",
+		"unplugin-auto-import": "^19.1.1",
+		"unplugin-vue-components": "^28.4.1",
+		"vue-eslint-parser": "^9.4.3",
+		"vite": "^6.3.5",
+		"vue-tsc": "^2.2.12"
+	}
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/Root.vue
+++ b/src/Root.vue
@@ -0,0 +1,47 @@
+<template>
+	<router-view />
+</template>
+
+<script setup lang="ts">
+import { useGlobalUIStore } from "@/store/globalUIStore";
+
+const globalUIStore = useGlobalUIStore();
+
+watch(
+	() => globalUIStore.bodyBackground,
+	(background: string) => {
+		document.body.style.background = background;
+	},
+	{ immediate: true }
+);
+
+watch(
+	() => globalUIStore.themeClass,
+	(themeClass: string) => {
+		document.documentElement.classList.toggle("theme-dark", themeClass === "theme-dark");
+	},
+	{ immediate: true }
+);
+</script>
+
+<style lang="less">
+html,
+body,
+#root {
+	height: 100%;
+	min-height: 100vh;
+}
+
+body {
+	margin: 0;
+}
+
+.t-overlay {
+	transition-duration: 500ms !important;
+}
+
+.t-popup {
+	animation-duration: 460ms;
+	animation-timing-function: var(--tui-bezier);
+}
+</style>
--- a/src/api/DockerAPI.ts
+++ b/src/api/DockerAPI.ts
@@ -0,0 +1,28 @@
+import { axios, Text } from "timi-web";
+import { useSettingStore } from "@/store/settingStore";
+import type { DockerContainerHistoryView, DockerContainerStatusView, DockerContainerSummaryView } from "@/types/Docker";
+
+async function getContainers(): Promise<DockerContainerSummaryView[]> {
+	const settingStore = useSettingStore();
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/docker/container`);
+}
+
+async function getContainerStatus(containerId: string): Promise<DockerContainerStatusView | null> {
+	const settingStore = useSettingStore();
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/docker/container/${encodeURIComponent(containerId)}/status`);
+}
+
+async function getContainerHistory(containerId: string, params?: {
+	window?: string;
+}): Promise<DockerContainerHistoryView | null> {
+	const settingStore = useSettingStore();
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/docker/container/${encodeURIComponent(containerId)}/history?${Text.urlArgs({
+		window: params?.window
+	})}`);
+}
+
+export default {
+	getContainers,
+	getContainerStatus,
+	getContainerHistory
+};
--- a/src/api/FileAPI.ts
+++ b/src/api/FileAPI.ts
@@ -0,0 +1,27 @@
+import { axios } from "timi-web";
+import type { ServerFile } from "@/types/File";
+import { useSettingStore } from "@/store/settingStore";
+
+async function list(pathSegments: string[]): Promise<ServerFile[]> {
+	const settingStore = useSettingStore();
+	const path = pathSegments.length ? `/${pathSegments.map((segment) => encodeURIComponent(segment)).join("/")}` : "";
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/file/list${path}`);
+}
+
+function buildURL(path: string, action = "download"): string {
+	const settingStore = useSettingStore();
+	const normalizedPath = path.trim();
+	const segments = normalizedPath.split("/").filter((segment) => !!segment);
+	const requestPath = segments.length ? `/${segments.map((segment) => encodeURIComponent(segment)).join("/")}` : "";
+	const url = new URL(`${settingStore.resolveBaseURL()}/system/file/${action}${requestPath}`);
+	const token = settingStore.connect.token.trim();
+	if (token) {
+		url.searchParams.set("token", token);
+	}
+	return url.toString();
+}
+
+export default {
+	list,
+	buildURL
+};
--- a/src/api/SystemAPI.ts
+++ b/src/api/SystemAPI.ts
@@ -0,0 +1,29 @@
+import { axios, Text } from "timi-web";
+import { useSettingStore } from "@/store/settingStore";
+import type { SystemStatusHistoryView, SystemStatusSnapshotView } from "@/types/System";
+
+async function getStatus(metrics?: string): Promise<SystemStatusSnapshotView> {
+	const settingStore = useSettingStore();
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/server/status?${Text.urlArgs({
+		metrics,
+	})}`);
+}
+
+async function getStatusHistory(params?: {
+	window?: string;
+	metrics?: string;
+}): Promise<SystemStatusHistoryView> {
+	const settingStore = useSettingStore();
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/server/status/history`, {
+		params: {
+			...(params?.window ? { window: params.window } : {}),
+			...(params?.metrics ? { metrics: params.metrics } : {})
+		},
+		timeout: 15000
+	});
+}
+
+export default {
+	getStatus,
+	getStatusHistory
+};
--- a/src/api/UpsAPI.ts
+++ b/src/api/UpsAPI.ts
@@ -0,0 +1,27 @@
+import { axios } from "timi-web";
+import type { UpsHistoryView, UpsStatusView } from "@/types/Ups";
+import { useSettingStore } from "@/store/settingStore";
+
+async function getStatus(): Promise<UpsStatusView | null> {
+	const settingStore = useSettingStore();
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/ups/status`, {
+		timeout: 15000
+	});
+}
+
+async function getStatusHistory(params?: {
+	window?: string;
+}): Promise<UpsHistoryView> {
+	const settingStore = useSettingStore();
+	return await axios.get(`${settingStore.resolveBaseURL()}/system/ups/history`, {
+		params: {
+			...(params?.window ? { window: params.window } : {})
+		},
+		timeout: 15000
+	});
+}
+
+export default {
+	getStatus,
+	getStatusHistory
+};
--- a/src/components/PageTransition.vue
+++ b/src/components/PageTransition.vue
@@ -0,0 +1,184 @@
+<template>
+	<div class="page-transition">
+		<router-view v-slot="{ Component }">
+			<transition :name="transitionName" :css="hasTransition">
+				<div class="pages" :key="pageKey">
+					<component :is="Component" />
+				</div>
+			</transition>
+		</router-view>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { RouteLocationNormalized } from "vue-router";
+import { viewDepthKey } from "vue-router";
+import { useGlobalUIStore } from "@/store/globalUIStore";
+
+defineOptions({
+	name: "PageTransition"
+});
+
+const router = useRouter();
+const route = useRoute();
+const globalUIStore = useGlobalUIStore();
+const viewDepth = inject(viewDepthKey, 0);
+
+const transitionName = ref("");
+const hasTransition = ref(false);
+const pageBackground = computed(() => globalUIStore.bodyBackground);
+const currentDepth = computed(() => Number(unref(viewDepth)));
+const pageKey = computed(() => {
+	const depth = currentDepth.value;
+	const matchedRecord = route.matched[depth];
+
+	if (!matchedRecord) {
+		return route.fullPath;
+	}
+
+	if (depth < route.matched.length - 1) {
+		return matchedRecord.path;
+	}
+
+	return route.fullPath;
+});
+
+const pathCache = new Map<string, number>();
+
+function calcDepth(sourceRoute: RouteLocationNormalized): number {
+	if (!sourceRoute.meta.dynamicDepth) {
+		return Number(sourceRoute.meta.depth ?? 0);
+	}
+
+	const fullPath = sourceRoute.fullPath;
+	const cached = pathCache.get(fullPath);
+	if (cached !== undefined) {
+		return cached;
+	}
+
+	const base = Number(sourceRoute.meta.baseDepth ?? 0);
+	const pathSegments = fullPath.split("?")[0].split("/").filter((pathSegment) => pathSegment !== "");
+	const depth = base + (pathSegments.length - 1);
+	pathCache.set(fullPath, depth);
+	return depth;
+}
+
+const unregisterGuard = router.beforeEach((to, from) => {
+	if (to.meta.tabBarRoot && from.meta.tabBarRoot) {
+		transitionName.value = "";
+		hasTransition.value = false;
+		return;
+	}
+
+	const toDepth = calcDepth(to);
+	const fromDepth = calcDepth(from);
+
+	if (fromDepth < toDepth) {
+		transitionName.value = "push-left";
+		hasTransition.value = true;
+	} else if (toDepth < fromDepth) {
+		transitionName.value = "push-right";
+		hasTransition.value = true;
+	} else {
+		transitionName.value = "";
+		hasTransition.value = false;
+	}
+});
+
+onUnmounted(() => {
+	unregisterGuard();
+	pathCache.clear();
+});
+</script>
+
+<style lang="less" scoped>
+@easing: cubic-bezier(.19, 1, .22, 1);
+@duration: 750ms;
+@brightness: .98;
+@shadow-intensity: .15;
+@page-offset: 25%;
+
+.page-transition {
+	width: 100%;
+	height: 100%;
+	display: grid;
+	min-height: 100%;
+	position: relative;
+	overflow-x: hidden;
+
+	.pages {
+		grid-area: 1 / 1;
+		width: 100%;
+		height: 100%;
+		min-height: 100%;
+		position: relative;
+		background: v-bind(pageBackground);
+		overflow-x: hidden;
+	}
+
+	.push-left-enter-active,
+	.push-left-leave-active,
+	.push-right-enter-active,
+	.push-right-leave-active {
+		grid-area: 1 / 1;
+		width: 100%;
+		height: 100%;
+		min-height: 100%;
+		transition: transform @duration @easing, opacity .2s linear;
+		backface-visibility: hidden;
+	}
+
+	.push-left-enter-active,
+	.push-right-leave-active {
+		z-index: 2;
+	}
+
+	.push-left-leave-active,
+	.push-right-enter-active {
+		z-index: 1;
+	}
+
+	.push-left-enter-from {
+		transform: translate3d(100%, 0, 0);
+		box-shadow: -4px 0 16px rgba(0, 0, 0, @shadow-intensity);
+	}
+
+	.push-left-enter-to {
+		transform: translate3d(0, 0, 0);
+	}
+
+	.push-left-leave-active {
+		transition: all @duration @easing, filter .3s;
+	}
+
+	.push-left-leave-to {
+		filter: brightness(@brightness);
+		transform: translate3d(-@page-offset, 0, 0);
+	}
+
+	.push-right-enter-active {
+		transition: transform @duration @easing, opacity .3s;
+	}
+
+	.push-right-enter-from {
+		transform: translate3d(-@page-offset, 0, 0);
+	}
+
+	.push-right-enter-to {
+		transform: translate3d(0, 0, 0);
+	}
+
+	.push-right-leave-active {
+		transition: transform @duration @easing, box-shadow .3s;
+	}
+
+	.push-right-leave-from {
+		transform: translate3d(0, 0, 0);
+	}
+
+	.push-right-leave-to {
+		transform: translate3d(105%, 0, 0);
+		box-shadow: 4px 0 16px rgba(0, 0, 0, @shadow-intensity);
+	}
+}
+</style>
--- a/src/components/ProgressGroup.vue
+++ b/src/components/ProgressGroup.vue
@@ -0,0 +1,193 @@
+<template>
+	<div class="progress-group">
+		<div
+			class="bar"
+			:class="{
+				heap: mode === 'heap',
+				splice: mode === 'splice'
+			}"
+		>
+			<template v-if="mode === 'heap'">
+				<div
+					v-for="(item, index) in heapProgressList"
+					:key="`heap-${index}`"
+					class="layer"
+					:style="{
+						width: `${item.value}%`,
+						background: item.color || 'var(--td-brand-color)'
+					}"
+				/>
+			</template>
+			<template v-else>
+				<div
+					v-for="(item, index) in spliceProgressList"
+					:key="`splice-${index}`"
+					class="segment"
+					:style="{
+						width: `${item.value}%`,
+						background: item.color || 'var(--td-brand-color)'
+					}"
+				/>
+			</template>
+			<div v-if="Toolkit.isNotEmpty(note)" class="health" v-text="note" />
+		</div>
+		<div v-if="Toolkit.isNotEmpty(legendList)" class="legends">
+			<div
+				v-for="(item, index) in legendList"
+				:key="`legend-${index}`"
+				class="legend"
+			>
+				<div class="block" :style="{ background: item.color }" />
+				<div v-text="item.legend" />
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { Toolkit } from "timi-web";
+
+export interface ProgressItem {
+	color?: string;
+	value: number;
+	legend?: string;
+}
+
+type ProgressMode = "heap" | "splice";
+
+interface RenderProgressItem {
+	color?: string;
+	value: number;
+	legend?: string;
+}
+
+defineOptions({
+	name: "ProgressGroup"
+});
+
+const props = withDefaults(
+	defineProps<{
+		mode?: ProgressMode;
+		maxValue?: number;
+		progress?: ProgressItem[];
+		note?: string;
+	}>(),
+	{
+		mode: "heap",
+		maxValue: 1,
+		progress: () => [],
+		note: ""
+	}
+);
+
+const normalizedProgressList = computed<RenderProgressItem[]>(() => {
+	const maxValue = 0 < props.maxValue ? props.maxValue : 100;
+	return props.progress.map((item) => {
+		const value = Math.min(Math.max(item.value / maxValue * 100, 0), 100);
+		return {
+			...item,
+			value
+		};
+	});
+});
+
+const heapProgressList = computed<RenderProgressItem[]>(() => {
+	return normalizedProgressList.value.filter((item) => 0 < item.value)
+								   .slice()
+								   .sort((left, right) => right.value - left.value);
+});
+
+const spliceProgressList = computed<RenderProgressItem[]>(() => {
+	let rest = 100;
+	return normalizedProgressList.value.filter((item) => 0 < item.value).map((item) => {
+		if (rest < 1) {
+			return {
+				...item,
+				value: 0
+			};
+		}
+		const width = Math.min(item.value, rest);
+		rest -= width;
+		return {
+			...item,
+			value: width
+		};
+	}).filter((item) => 0 < item.value);
+});
+
+const legendList = computed<RenderProgressItem[]>(() => {
+	return normalizedProgressList.value.filter(item => Toolkit.isNotEmpty(item.legend));
+});
+</script>
+
+<style lang="less" scoped>
+.progress-group {
+	gap: .5rem;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+
+	.bar {
+		width: 100%;
+		height: 1.25rem;
+		overflow: hidden;
+		position: relative;
+		background: var(--td-progress-track-bg-color, var(--td-bg-color-component, var(--td-gray-color-3, #e7e7e7)));
+		border-radius: .1875rem;
+
+		&.heap {
+			.layer {
+				top: 0;
+				left: 0;
+				height: 100%;
+				position: absolute;
+			}
+		}
+
+		&.splice {
+			display: flex;
+
+			.segment {
+				height: 100%;
+			}
+		}
+
+
+		.layer,
+		.segment {
+			transition: width 320ms var(--tui-bezier);
+		}
+
+		.health {
+			top: 50%;
+			right: .25rem;
+			z-index: 2;
+			position: absolute;
+			font-size: .8rem;
+			transform: translate(0, -50%);
+			white-space: nowrap;
+			pointer-events: none;
+		}
+	}
+
+	.legends {
+		gap: .75rem;
+		display: flex;
+		flex-wrap: wrap;
+
+		.legend {
+			gap: .375rem;
+			display: flex;
+			font-size: .75rem;
+			align-items: center;
+			color: var(--td-text-color-secondary, var(--app-sub, #8899a8));
+
+			.block {
+				width: .8rem;
+				height: .8rem;
+				border-radius: .125rem;
+			}
+		}
+	}
+}
+</style>
--- a/src/components/TCellInfo.vue
+++ b/src/components/TCellInfo.vue
@@ -0,0 +1,99 @@
+<template>
+	<t-cell class="t-cell-info" :class="{ 'has-description': hasDescription }">
+		<template #title>
+			<div class="content">
+				<div class="label" :class="{
+					'clip-text': clipText === 'label',
+					'keep-text': clipText === 'value'
+				}">
+					<slot name="label">
+						<span v-text="label"></span>
+					</slot>
+				</div>
+				<div class="value light-gray" :class="{
+					'clip-text': clipText === 'value',
+					'keep-text': clipText === 'label'
+				}">
+					<slot name="value">
+						<span v-text="value"></span>
+					</slot>
+				</div>
+			</div>
+		</template>
+		<template #description>
+			<slot name="description">
+				<slot>
+					<div v-if="description" class="description" v-text="description"></div>
+				</slot>
+			</slot>
+		</template>
+	</t-cell>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+	defineProps<{
+		label?: string;
+		value?: string;
+		description?: string;
+		clipText?: 'label' | 'value';
+	}>(),
+	{
+		label: '',
+		value: '',
+		description: '',
+		clipText: 'value',
+	},
+);
+
+const slots = useSlots();
+const { label, value, description, clipText } = toRefs(props);
+const hasDescription = computed(() => {
+	return Boolean(props.description?.trim() || slots.description || slots.default);
+});
+
+defineSlots<{
+	default?: () => unknown;
+	label?: () => unknown;
+	value?: () => unknown;
+	description?: () => unknown;
+}>();
+</script>
+
+<style lang="less" scoped>
+.t-cell-info {
+
+	:deep(.t-cell__title) {
+		margin: 0;
+		max-width: 100%;
+	}
+
+	:deep(.t-cell__description) {
+		margin: 0;
+		max-width: 100%;
+	}
+
+	&.has-description {
+		:deep(.t-cell__description) {
+			margin-top: .25rem;
+		}
+	}
+
+	.content {
+		width: 100%;
+		display: flex;
+		min-width: 0;
+		align-items: baseline;
+		justify-content: space-between;
+
+		.label {
+			margin-right: .5rem;
+		}
+
+		.value {
+			font-size: 14px;
+			text-align: right;
+		}
+	}
+}
+</style>
--- a/src/layout/MainLayout.vue
+++ b/src/layout/MainLayout.vue
@@ -0,0 +1,276 @@
+<template>
+	<div class="main-layout">
+		<t-navbar
+			ref="navBarRef"
+			v-if="navBarStore.isShowing"
+			class="nav-bar"
+			:title="navBarStore.title"
+			:left-arrow="!!navBarStore.canBack"
+			@left-click="doBack"
+		>
+			<template #right>
+				<div class="nav-extra">
+					<component :is="navBarStore.rightRenderer" v-if="navBarStore.rightRenderer" />
+				</div>
+			</template>
+		</t-navbar>
+		<div :class="{ 'is-fixed-height': isContentFixedHeight }" class="router-view">
+			<page-transition />
+		</div>
+		<t-tab-bar
+			:class="{ 'is-hidden': !tabBarStore.isShowing }"
+			class="tab-bar glass-white"
+			v-model="tabVal"
+			shape="round"
+			theme="tag"
+			:split="false"
+			:disabled="!tabBarStore.isShowing"
+			@change="onChangeTab"
+		>
+			<t-tab-bar-item v-if="musicPlayerStore.hasQueue" class="item bg-transparent music-item" value="__music__">
+				<template #icon>
+					<t-icon name="music" />
+				</template>
+			</t-tab-bar-item>
+			<t-tab-bar-item class="item bg-transparent" v-for="item in tabList" :key="item.value" :value="item.value">
+				<template #icon>
+					<t-icon :name="item.icon" />
+				</template>
+			</t-tab-bar-item>
+		</t-tab-bar>
+		<music-player-popup />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useNavBarStore } from "@/store/navBarStore";
+import { useTabBarStore } from "@/store/tabBarStore";
+import PageTransition from "@/components/PageTransition.vue";
+import MusicPlayerPopup from "@/pages/system/MusicPlayerPopup.vue";
+import { useMusicPlayerStore } from "@/store/musicPlayerStore";
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const tabBarStore = useTabBarStore();
+const musicPlayerStore = useMusicPlayerStore();
+
+// ---------- 导航栏高度 ----------
+
+const navBarRef = ref();
+let navBarResizeObs: ResizeObserver | undefined;
+
+onMounted(() => {
+	if (navBarRef.value) {
+		navBarResizeObs = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				navBarStore.setHeight(entry.contentRect.height);
+				return;
+			}
+		});
+		navBarResizeObs.observe(navBarRef.value.$el.querySelector(".t-navbar__content"));
+	}
+});
+
+onUnmounted(() => {
+	if (navBarResizeObs) {
+		navBarResizeObs.disconnect();
+	}
+});
+
+// ---------- 导航返回 ----------
+
+function doBack(): void {
+	if (navBarStore.backTo) {
+		router.push(navBarStore.backTo);
+		navBarStore.setBackTo(undefined);
+	} else {
+		router.back();
+	}
+}
+
+const navBarPadding = computed(() => {
+	if (navBarStore.isShowing) {
+		return `${navBarStore.height || 48}px`;
+	}
+
+	return "0";
+});
+
+const topPadding = computed(() => {
+	return `calc(${navBarPadding.value} + var(--safe-top))`;
+});
+
+// ---------- Tab 切换 ----------
+
+const tabVal = ref(route.path);
+const tabList = [
+	{ value: "/", icon: "app" },
+	{ value: "/server", icon: "chart" },
+	{ value: "/settings", icon: "setting" }
+];
+
+function resolveTabValue(path: string): string {
+	if (path === "/" || path.startsWith("/files/")) {
+		return "/";
+	}
+
+	return path;
+}
+
+watch(
+	() => route.path,
+	(newPath: string) => {
+		tabVal.value = resolveTabValue(newPath);
+	},
+	{ immediate: true }
+);
+
+function onChangeTab(value: string): void {
+	if (value === "__music__") {
+		musicPlayerStore.setPopupVisible(true);
+		tabVal.value = resolveTabValue(route.path);
+		return;
+	}
+
+	router.push(value);
+}
+
+const isTabBarPaddingNeeded = computed(() => {
+	if (!tabBarStore.isShowing) {
+		return false;
+	}
+
+	return route.meta.tabBarPadding !== false;
+});
+
+const tabBarPadding = computed(() => {
+	if (isTabBarPaddingNeeded.value) {
+		return "6rem";
+	}
+
+	return "0rem";
+});
+
+const isContentFixedHeight = computed(() => {
+	return route.meta.contentFixedHeight === true;
+});
+
+const bodyHeight = computed(() => {
+	return `calc(100vh - ${tabBarPadding.value})`;
+});
+
+const contentHeight = computed(() => {
+	return bodyHeight.value;
+});
+</script>
+
+<style scoped lang="less">
+.main-layout {
+	--app-nav-offset: v-bind(topPadding);
+	--safe-top: env(safe-area-inset-top, 0px);
+	box-sizing: border-box;
+	isolation: isolate;
+	position: relative;
+	min-height: 100vh;
+	padding-bottom: v-bind(tabBarPadding);
+	transition: padding-bottom .24s ease;
+
+	.nav-bar {
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 1100;
+		position: fixed;
+
+		:deep(.t-navbar) {
+			z-index: 1;
+			position: relative;
+		}
+
+		:deep(.t-navbar__content) {
+			color: var(--tui-black, #000);
+			border-bottom: 1px solid rgba(0, 0, 0, .1);
+			background: rgba(250, 250, 250, .8);
+			backdrop-filter: blur(10px);
+			-webkit-backdrop-filter: blur(10px);
+		}
+
+		.nav-extra {
+			gap: .35rem;
+			display: inline-flex;
+			align-items: center;
+			justify-content: flex-end;
+		}
+	}
+
+	.router-view {
+		width: 100%;
+		position: relative;
+		z-index: 0;
+		min-height: v-bind(contentHeight);
+
+		&.is-fixed-height {
+			height: v-bind(contentHeight);
+			min-height: 0;
+			overflow: hidden;
+		}
+	}
+
+	.tab-bar {
+		bottom: 1rem;
+		left: 1rem;
+		right: 1rem;
+		position: fixed;
+		z-index: 1000;
+		opacity: 1;
+		transform: translateY(0);
+		transition: opacity 520ms, transform 520ms var(--tui-bezier);
+		pointer-events: auto;
+
+		&.glass-white {
+			// 不明原因失效，重新配置
+			backdrop-filter: blur(10px);
+		}
+
+
+		&.is-hidden {
+			opacity: 0;
+			pointer-events: none;
+			transform: translateY(calc(100% + 1rem));
+		}
+
+		.item {
+			margin: 0;
+			padding: 0;
+			--td-tab-bar-height: 52px;
+
+			:deep(.t-tab-bar-item__content) {
+				border-radius: 0;
+			}
+
+			&:first-child {
+
+				:deep(.t-tab-bar-item__content) {
+					border-radius: 99px 0 0 99px;
+				}
+			}
+
+			&:last-child {
+
+				:deep(.t-tab-bar-item__content) {
+					border-radius: 0 99px 99px 0;
+				}
+			}
+		}
+	}
+}
+
+:global(.theme-dark) .main-layout {
+	.nav-bar {
+		:deep(.t-navbar__content) {
+			background: rgba(16, 20, 24, .88);
+		}
+	}
+}
+</style>
--- a/src/layout/RootLayout.vue
+++ b/src/layout/RootLayout.vue
@@ -0,0 +1,16 @@
+<template>
+	<div class="root-layout diselect">
+		<page-transition />
+	</div>
+</template>
+
+<script setup lang="ts">
+import PageTransition from "@/components/PageTransition.vue";
+</script>
+
+<style scoped lang="less">
+.root-layout {
+	width: 100%;
+	min-height: 100vh;
+}
+</style>
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,43 @@
+import { createApp } from "vue";
+import { createPinia } from "pinia";
+import { Toast } from "tdesign-mobile-vue";
+import router from "@/router";
+import Root from "@/Root.vue";
+
+import "tdesign-mobile-vue/es/style/index.css";
+import "timi-web/style.css";
+import "timi-tdesign-mobile/style.css";
+import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
+import { axios } from "timi-web";
+import { useSettingStore } from "@/store/settingStore.ts";
+
+axios.interceptors.request.use((config) => {
+	const settingStore = useSettingStore();
+	const token = settingStore.connect.token.trim();
+	if (token) {
+		if (config.method === "get") {
+			config.params = {
+				token,
+				...config.params
+			};
+		}
+		config.headers.set({ "Token": token });
+	}
+	return config;
+}, (error: any) => {
+	return Promise.reject(error);
+});
+
+export const pinia = createPinia();
+
+const app = createApp(Root);
+app.config.errorHandler = (error) => {
+	console.error(error);
+	Toast({
+		theme: "error",
+		message: "页面发生异常，请稍后重试"
+	});
+};
+app.use(pinia);
+app.use(router);
+app.mount("#root");
--- a/src/pages/dashboard/DockerDashboard/DockerContainerDetail.vue
+++ b/src/pages/dashboard/DockerDashboard/DockerContainerDetail.vue
@@ -0,0 +1,762 @@
+<template>
+	<div class="docker-container-detail">
+		<t-empty v-if="!containerId" description="缺少容器 ID 参数" />
+		<template v-else>
+			<div v-if="isStatusLoading && !statusView" class="loading-wrap">
+				<t-loading text="加载容器状态..." />
+			</div>
+			<template v-else-if="statusView">
+				<t-cell-group title="容器概览" theme="card">
+					<t-cell title="名称" :note="Text.display(statusView?.name)" />
+					<t-cell title="镜像" :note="Text.display(statusView?.image)" />
+					<t-cell title="状态" :note="resolveStateText(statusView?.state)" />
+					<t-cell title="状态详情" :note="Text.display(statusView?.status)" />
+					<t-cell title="健康检查" :note="resolveHealthText(statusView?.healthStatus)" />
+					<t-cell title="容器 ID" :note="Text.display(statusView?.id?.slice(0, 12))" />
+					<t-cell title="镜像 ID" :note="Text.display(statusView?.imageId?.slice(0, 12))" />
+					<t-cell title="创建时间" :note="Time.toPassedDateTime(statusView?.createdAt)" />
+					<t-cell title="启动时间" :note="resolveDockerRawTime(statusView?.startedAt)" />
+					<t-cell title="结束时间" :note="resolveDockerRawTime(statusView?.finishedAt)" />
+					<t-cell title="采样时间" :note="Time.toPassedDateTime(statusView?.updatedAt)" />
+				</t-cell-group>
+				<t-cell-group class="section resource" title="资源使用" theme="card">
+					<t-cell-info label="CPU 使用率" :value="Text.unit(statusView?.cpuPercent, '%')">
+						<progress-group mode="heap" :progress="cpuProgressList" />
+					</t-cell-info>
+					<t-cell-info label="内存使用率" :value="memoryUsageText">
+						<progress-group mode="heap" :progress="memoryProgressList" :note="Text.unit(statusView?.memoryPercent, '%')" />
+					</t-cell-info>
+					<t-cell title="进程数" :note="Text.display(statusView?.pids)" />
+					<t-cell title="重启次数" :note="Text.display(statusView?.restartCount)" />
+					<t-cell title="退出码" :note="Text.display(statusView?.exitCode)" />
+					<t-cell title="OOM Kill" :note="Text.displayBool(statusView?.oomKilled, '是', '否')" />
+				</t-cell-group>
+				<t-cell-group class="section traffic" title="网络与块设备" theme="card">
+					<t-cell title="网络接收" :note="IOSize.format(statusView?.networkRxBytes)" />
+					<t-cell title="网络发送" :note="IOSize.format(statusView?.networkTxBytes)" />
+					<t-cell title="块设备读取" :note="IOSize.format(statusView?.blockReadBytes)" />
+					<t-cell title="块设备写入" :note="IOSize.format(statusView?.blockWriteBytes)" />
+				</t-cell-group>
+			</template>
+			<t-empty v-else description="暂无容器状态数据" />
+
+			<t-cell-group class="section history" title="历史采样" theme="card">
+				<t-tabs class="metric-tabs" :value="historyMetric" @change="handleHistoryMetricChange">
+					<t-tab-panel v-for="item in historyMetricTabs" :key="item.value" :value="item.value" :label="item.label" />
+				</t-tabs>
+				<div v-if="isHistoryLoading && !historyItems.length" class="loading-wrap">
+					<t-loading text="加载容器历史..." />
+				</div>
+				<template v-else-if="historyItems.length">
+					<v-chart
+						ref="chartRef"
+						class="chart"
+						:option="historyChartOption"
+						:update-options="historyChartUpdateOptions"
+						:autoresize="true"
+					/>
+					<div class="slider bg-white">
+						<span class="label">较早</span>
+						<t-slider
+							class="control"
+							:min="0"
+							:max="Math.max(historyItems.length - historyVisibleCount, 0)"
+							:step="1"
+							:value="historySliderValue"
+							@change="handleHistorySliderChange"
+						/>
+						<span class="label">最新</span>
+					</div>
+					<t-cell-group>
+						<t-cell v-for="item in historySummary" :key="item.label" :title="item.label" :note="item.value" />
+					</t-cell-group>
+				</template>
+				<t-empty v-else description="暂无容器历史数据" />
+			</t-cell-group>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import { use } from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import VChart from "vue-echarts";
+import type { EChartsOption, SeriesOption } from "echarts";
+import DockerAPI from "@/api/DockerAPI";
+import type {
+	DockerContainerHistoryPointView,
+	DockerContainerStatusView
+} from "@/types/Docker";
+import { useSettingStore } from "@/store/settingStore";
+import { IOSize, type LabelValue, Text, Time } from "timi-web";
+import TCellInfo from "@/components/TCellInfo.vue";
+import type { ProgressItem } from "@/components/ProgressGroup.vue";
+import ProgressGroup from "@/components/ProgressGroup.vue";
+
+type DockerHistoryMetric = "cpu" | "memory" | "network" | "block" | "pids";
+
+use([
+	SVGRenderer,
+	LineChart,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent
+]);
+
+defineOptions({
+	name: "DockerContainerDetail"
+});
+
+const route = useRoute();
+const settingStore = useSettingStore();
+
+const containerId = computed(() => {
+	const queryContainerId = route.query.containerId;
+	if (typeof queryContainerId === "string") {
+		return queryContainerId;
+	}
+	if (Array.isArray(queryContainerId) && queryContainerId.length) {
+		return queryContainerId[0];
+	}
+	return "";
+});
+
+const isStatusLoading = ref(false);
+const isHistoryLoading = ref(false);
+
+const statusView = ref<DockerContainerStatusView | null>(null);
+const historyPoints = ref<DockerContainerHistoryPointView[]>([]);
+
+const chartRef = ref<InstanceType<typeof VChart> | null>(null);
+const historyChartUpdateOptions = Object.freeze({
+	notMerge: true
+});
+
+// ---------- 当前状态 ----------
+
+const cpuProgressList = computed<ProgressItem[]>(() => {
+	return [
+		{
+			color: "var(--td-brand-color)",
+			value: normalizePercent(statusView.value?.cpuPercent)
+		}
+	];
+});
+const memoryUsageText = computed(() => {
+	const usage = IOSize.format(statusView.value?.memoryUsageBytes || 0);
+	const limitValue = statusView.value?.memoryLimitBytes || 0;
+	const limit = limitValue < 1 ? "无限制" : IOSize.format(limitValue);
+	return `${usage} / ${limit}`;
+});
+const memoryProgressList = computed<ProgressItem[]>(() => {
+	const limit = statusView.value?.memoryLimitBytes || 0;
+	const usage = statusView.value?.memoryUsageBytes || 0;
+	const fallback = limit < 1 ? 0 : usage / limit;
+	const percent = statusView.value?.memoryPercent;
+	return [
+		{
+			color: "var(--td-warning-color)",
+			value: normalizePercent(percent, fallback)
+		}
+	];
+});
+
+function normalizePercent(percent?: number | null, fallback = 0): number {
+	const source = typeof percent === "number" ? percent / 100 : fallback;
+	if (Number.isNaN(source) || !Number.isFinite(source)) {
+		return 0;
+	}
+	return Math.min(Math.max(source, 0), 1);
+}
+
+function resolveStateText(state?: string | null): string {
+	if (!state) {
+		return "-";
+	}
+	const map: Record<string, string> = {
+		created: "已创建",
+		running: "运行中",
+		restarting: "重启中",
+		exited: "已退出",
+		paused: "已暂停",
+		dead: "已停止"
+	};
+	return map[state] || state;
+}
+
+function resolveHealthText(health?: string | null): string {
+	if (!health) {
+		return "未配置";
+	}
+	const map: Record<string, string> = {
+		healthy: "健康",
+		unhealthy: "异常",
+		starting: "启动中"
+	};
+	return map[health] || health;
+}
+
+function resolveDockerRawTime(value?: string | null): string {
+	if (!value || value.startsWith("0001-01-01")) {
+		return "-";
+	}
+	const dateValue = Date.parse(value);
+	if (Number.isNaN(dateValue)) {
+		return value;
+	}
+	return Time.toPassedDateTime(dateValue);
+}
+
+// ---------- 历史采样 ----------
+
+const historyMetric = ref<DockerHistoryMetric>("cpu");
+
+const historyMetricTabs = computed(() => {
+	const labelMap: Record<DockerHistoryMetric, string> = {
+		cpu: "CPU",
+		memory: "内存",
+		network: "网络",
+		block: "块设备",
+		pids: "进程"
+	};
+	return (Object.keys(labelMap) as DockerHistoryMetric[]).map((item) => ({
+		value: item,
+		label: labelMap[item]
+	}));
+});
+
+function handleHistoryMetricChange(value: string): void {
+	const nextValue = value as DockerHistoryMetric;
+	if (nextValue === "cpu" || nextValue === "memory" || nextValue === "network" || nextValue === "block" || nextValue === "pids") {
+		historyMetric.value = nextValue;
+	}
+}
+
+const historyItems = computed<DockerContainerHistoryPointView[]>(() => {
+	return historyPoints.value.slice().sort((left, right) => left.at - right.at);
+});
+const historySummary = computed<LabelValue<string, any>[]>(() => {
+	const lastPoint = historyItems.value[historyItems.value.length - 1];
+	if (!lastPoint) {
+		return [];
+	}
+	if (historyMetric.value === "cpu") {
+		return [
+			{ label: "CPU 使用率", value: Text.unit(lastPoint.cpuPercent, "%") }
+		];
+	}
+	if (historyMetric.value === "memory") {
+		return [
+			{ label: "内存占用", value: IOSize.format(lastPoint.memoryUsageBytes || 0) },
+			{ label: "内存使用率", value: Text.unit(lastPoint.memoryPercent, "%") }
+		];
+	}
+	if (historyMetric.value === "network") {
+		return [
+			{ label: "累计接收", value: IOSize.format(lastPoint.networkRxBytes || 0) },
+			{ label: "累计发送", value: IOSize.format(lastPoint.networkTxBytes || 0) }
+		];
+	}
+	if (historyMetric.value === "block") {
+		return [
+			{ label: "累计读取", value: IOSize.format(lastPoint.blockReadBytes || 0) },
+			{ label: "累计写入", value: IOSize.format(lastPoint.blockWriteBytes || 0) }
+		];
+	}
+	return [
+		{ label: "进程数", value: Text.display(lastPoint.pids) }
+	];
+});
+
+const isHistorySliderTouched = ref(false);
+const historySliderValue = ref(0);
+const HISTORY_DEFAULT_VISIBLE_COUNT = 24;
+
+const historyVisibleCount = computed(() => {
+	if (historyItems.value.length < 1) {
+		return 1;
+	}
+	return Math.min(HISTORY_DEFAULT_VISIBLE_COUNT, historyItems.value.length);
+});
+const historySliderMaxStart = computed(() => {
+	return Math.max(historyItems.value.length - historyVisibleCount.value, 0);
+});
+const currentHistoryRange = computed(() => {
+	const length = historyItems.value.length;
+	if (length < 1) {
+		return { startValue: 0, endValue: 0 };
+	}
+	const startValue = Math.min(Math.max(Math.floor(historySliderValue.value), 0), historySliderMaxStart.value);
+	const endValue = Math.min(startValue + historyVisibleCount.value - 1, length - 1);
+	return { startValue, endValue };
+});
+const visibleHistoryItems = computed<DockerContainerHistoryPointView[]>(() => {
+	if (!historyItems.value.length) {
+		return [];
+	}
+	return historyItems.value.slice(currentHistoryRange.value.startValue, currentHistoryRange.value.endValue + 1);
+});
+
+watch(() => historyItems.value.length, (length) => {
+	if (length < 1) {
+		historySliderValue.value = 0;
+		isHistorySliderTouched.value = false;
+		return;
+	}
+	if (!isHistorySliderTouched.value) {
+		historySliderValue.value = historySliderMaxStart.value;
+		return;
+	}
+	historySliderValue.value = Math.min(historySliderValue.value, historySliderMaxStart.value);
+});
+
+function handleHistorySliderChange(value: number): void {
+	historySliderValue.value = Math.min(Math.max(Math.floor(value), 0), historySliderMaxStart.value);
+	isHistorySliderTouched.value = true;
+}
+
+function resetHistorySlider(): void {
+	historySliderValue.value = 0;
+	isHistorySliderTouched.value = false;
+}
+
+// ---------- 图表 ----------
+
+const isDarkTheme = ref(false);
+let themeObserver: MutationObserver | null = null;
+
+const historyChartOption = computed((): EChartsOption => {
+	const axisColor = isDarkTheme.value ? "#9aa4b2" : "#7e8a9a";
+	const lineColor = isDarkTheme.value ? "rgba(255, 255, 255, .12)" : "rgba(18, 42, 66, .08)";
+	const legendColor = isDarkTheme.value ? "#d7dee8" : "#334155";
+
+	const commonOption: EChartsOption = {
+		tooltip: {
+			trigger: "axis",
+			confine: true,
+			position: (point, _params, _dom, _rect, size) => {
+				const gap = 6;
+				const fingerGap = 24;
+				const contentSize = size?.contentSize || [0, 0];
+				const viewSize = size?.viewSize || [0, 0];
+				const maxLeft = Math.max(viewSize[0] - contentSize[0] - gap, gap);
+				const maxTop = Math.max(viewSize[1] - contentSize[1] - gap, gap);
+				const clamp = (value: number, min: number, max: number): number => {
+					return Math.min(Math.max(value, min), max);
+				};
+				const preferLeft = point[0] - contentSize[0] - gap;
+				const preferRight = point[0] + gap;
+				const left = point[0] < viewSize[0] / 2
+					? clamp(preferRight, gap, maxLeft)
+					: clamp(preferLeft, gap, maxLeft);
+				const preferTop = point[1] - contentSize[1] - fingerGap;
+				const preferBottom = point[1] + fingerGap;
+				const top = preferTop >= gap
+					? clamp(preferTop, gap, maxTop)
+					: clamp(preferBottom, gap, maxTop);
+				return [left, top];
+			}
+		},
+		legend: {
+			top: 10,
+			textStyle: {
+				color: legendColor
+			}
+		},
+		grid: {
+			top: 40,
+			left: 8,
+			right: 8,
+			bottom: 8,
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: false,
+			data: visibleHistoryItems.value.map((item) => item.at),
+			axisLabel: {
+				color: axisColor,
+				formatter: val => Time.toShortTime(Number(val))
+			},
+			axisLine: {
+				lineStyle: {
+					color: lineColor
+				}
+			}
+		}
+	};
+
+	if (!historyItems.value.length) {
+		return commonOption;
+	}
+
+	if (historyMetric.value === "cpu") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: params => formatPercentTooltip(params, " %")
+			},
+			yAxis: {
+				type: "value",
+				min: 0,
+				max: 100,
+				axisLabel: {
+					color: axisColor,
+					formatter: "{value} %"
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("CPU", visibleHistoryItems.value.map((item) => item.cpuPercent || 0))
+			]
+		};
+	}
+
+	if (historyMetric.value === "memory") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: params => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`;
+					const lines = list.map((item) => {
+						const currentName = item.seriesName || "";
+						if (currentName === "内存占用") {
+							return `${item.marker}${currentName}: ${IOSize.format(Number(item.value))}`;
+						}
+						return `${item.marker}${currentName}: ${Text.unit(Number(item.value), " %")}`;
+					});
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: [
+				{
+					type: "value",
+					axisLabel: {
+						color: axisColor,
+						formatter: (value: number) => IOSize.format(value)
+					},
+					splitLine: {
+						lineStyle: {
+							color: lineColor
+						}
+					}
+				},
+				{
+					type: "value",
+					min: 0,
+					max: 100,
+					axisLabel: {
+						color: axisColor,
+						formatter: "{value} %"
+					},
+					splitLine: {
+						show: false
+					}
+				}
+			],
+			series: [
+				resolveLineSeries("内存占用", visibleHistoryItems.value.map((item) => item.memoryUsageBytes || 0)),
+				resolveLineSeries("内存使用率", visibleHistoryItems.value.map((item) => item.memoryPercent || 0), 1)
+			]
+		};
+	}
+
+	if (historyMetric.value === "network") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: params => formatSizeTooltip(params)
+			},
+			yAxis: {
+				type: "value",
+				axisLabel: {
+					color: axisColor,
+					formatter: (value: number) => IOSize.format(value)
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("接收", visibleHistoryItems.value.map((item) => item.networkRxBytes || 0)),
+				resolveLineSeries("发送", visibleHistoryItems.value.map((item) => item.networkTxBytes || 0))
+			]
+		};
+	}
+
+	if (historyMetric.value === "block") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: params => formatSizeTooltip(params)
+			},
+			yAxis: {
+				type: "value",
+				axisLabel: {
+					color: axisColor,
+					formatter: (value: number) => IOSize.format(value)
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("读取", visibleHistoryItems.value.map((item) => item.blockReadBytes || 0)),
+				resolveLineSeries("写入", visibleHistoryItems.value.map((item) => item.blockWriteBytes || 0))
+			]
+		};
+	}
+
+	return {
+		...commonOption,
+		tooltip: {
+			...commonOption.tooltip,
+			formatter: params => {
+				const list = Array.isArray(params) ? params : [params];
+				const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`;
+				const lines = list.map((item) => `${item.marker}${item.seriesName}: ${Text.display(Number(item.value))}`);
+				return [title, ...lines].join("<br />");
+			}
+		},
+		yAxis: {
+			type: "value",
+			minInterval: 1,
+			axisLabel: {
+				color: axisColor
+			},
+			splitLine: {
+				lineStyle: {
+					color: lineColor
+				}
+			}
+		},
+		series: [
+			resolveLineSeries("进程数", visibleHistoryItems.value.map((item) => item.pids || 0))
+		]
+	};
+});
+
+function formatPercentTooltip(params: unknown, unit: string): string {
+	const list = Array.isArray(params) ? params : [params];
+	const title = `时间：${Time.toDateTime(Number((list[0] as { name?: string }).name || 0))}`;
+	const lines = list.map((item) => {
+		const current = item as { marker?: string; seriesName?: string; value?: number };
+		return `${current.marker || ""}${current.seriesName || ""}: ${Text.unit(Number(current.value || 0), unit)}`;
+	});
+	return [title, ...lines].join("<br />");
+}
+
+function formatSizeTooltip(params: unknown): string {
+	const list = Array.isArray(params) ? params : [params];
+	const title = `时间：${Time.toDateTime(Number((list[0] as { name?: string }).name || 0))}`;
+	const lines = list.map((item) => {
+		const current = item as { marker?: string; seriesName?: string; value?: number };
+		return `${current.marker || ""}${current.seriesName || ""}: ${IOSize.format(Number(current.value || 0))}`;
+	});
+	return [title, ...lines].join("<br />");
+}
+
+function resolveLineSeries(name: string, data: Array<number | null>, yAxisIndex?: number): SeriesOption {
+	const series: SeriesOption = {
+		type: "line",
+		name,
+		showSymbol: false,
+		smooth: true,
+		lineStyle: {
+			width: 2
+		},
+		areaStyle: {
+			opacity: .18
+		},
+		data
+	};
+
+	if (typeof yAxisIndex === "number") {
+		series.yAxisIndex = yAxisIndex;
+	}
+
+	return series;
+}
+
+// ---------- 加载与自动刷新 ----------
+
+let statusTimer: number | null = null;
+let historyTimer: number | null = null;
+
+watch(() => settingStore.dashboard.server, restartAutoRefresh, { deep: true });
+watch(containerId, () => {
+	statusView.value = null;
+	historyPoints.value = [];
+	resetHistorySlider();
+	restartAutoRefresh();
+}, { immediate: true });
+
+onMounted(() => {
+	updateThemeState();
+	themeObserver = new MutationObserver(() => {
+		updateThemeState();
+	});
+	themeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class"]
+	});
+});
+
+onUnmounted(() => {
+	clearAutoRefreshTimer();
+	if (themeObserver) {
+		themeObserver.disconnect();
+		themeObserver = null;
+	}
+});
+
+function updateThemeState(): void {
+	isDarkTheme.value = document.documentElement.classList.contains("theme-dark");
+}
+
+async function refreshContainerStatus(): Promise<void> {
+	if (!containerId.value) {
+		statusView.value = null;
+		return;
+	}
+	if (isStatusLoading.value) {
+		return;
+	}
+	isStatusLoading.value = true;
+	try {
+		statusView.value = await DockerAPI.getContainerStatus(containerId.value);
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isStatusLoading.value = false;
+	}
+}
+
+async function refreshContainerHistory(): Promise<void> {
+	if (!containerId.value) {
+		historyPoints.value = [];
+		return;
+	}
+	if (isHistoryLoading.value) {
+		return;
+	}
+	isHistoryLoading.value = true;
+	try {
+		const historyView = await DockerAPI.getContainerHistory(containerId.value, {
+			window: "2h"
+		});
+		historyPoints.value = historyView?.points || [];
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isHistoryLoading.value = false;
+	}
+}
+
+async function refreshDashboard(): Promise<void> {
+	await refreshContainerStatus();
+	await refreshContainerHistory();
+}
+
+function restartAutoRefresh(): void {
+	clearAutoRefreshTimer();
+	if (!containerId.value) {
+		return;
+	}
+	void refreshDashboard();
+
+	const snapshotIntervalMs = Math.max(settingStore.dashboard.server.snapshotRefreshSeconds, 1) * 1000;
+	const historyIntervalMs = Math.max(settingStore.dashboard.server.historyRefreshSeconds, 1) * 1000;
+
+	statusTimer = window.setInterval(() => {
+		void refreshContainerStatus();
+	}, snapshotIntervalMs);
+
+	historyTimer = window.setInterval(() => {
+		void refreshContainerHistory();
+	}, historyIntervalMs);
+}
+
+function clearAutoRefreshTimer(): void {
+	if (statusTimer !== null) {
+		window.clearInterval(statusTimer);
+		statusTimer = null;
+	}
+	if (historyTimer !== null) {
+		window.clearInterval(historyTimer);
+		historyTimer = null;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.docker-container-detail {
+	gap: 1rem;
+	display: flex;
+	padding: var(--app-nav-offset) 0 1rem 0;
+	flex-direction: column;
+
+	.section {
+
+		&.history {
+
+			.metric-tabs {
+				width: 100%;
+				--td-tab-track-width: 4rem;
+			}
+
+			.chart {
+				width: 100%;
+				height: 16rem;
+				background: #FFF;
+			}
+
+			.slider {
+				gap: .5rem;
+				display: flex;
+				padding: .5rem 2rem;
+				align-items: center;
+
+				.label {
+					flex: none;
+					font-size: .75rem;
+					color: var(--app-sub);
+				}
+
+				.control {
+					flex: 1;
+				}
+			}
+		}
+	}
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
--- a/src/pages/dashboard/DockerDashboard/DockerDashboard.vue
+++ b/src/pages/dashboard/DockerDashboard/DockerDashboard.vue
@@ -0,0 +1,355 @@
+<template>
+	<div class="docker-dashboard">
+		<div v-if="isListLoading && !containerItems.length" class="loading-wrap">
+			<t-loading text="加载 Docker 容器..." />
+		</div>
+		<template v-else-if="containerItems.length">
+			<t-cell-group title="状态统计" theme="card">
+				<div class="section overview">
+					<div v-for="item in containerOverviewStats" :key="item.key" class="stat bg-white">
+						<span class="label" v-text="item.label" />
+						<span :class="['value', item.className]" v-text="Text.display(item.value)" />
+					</div>
+				</div>
+			</t-cell-group>
+			<t-cell-group title="容器列表" theme="card">
+				<div class="section list">
+					<button
+						v-for="item in containerItems"
+						:key="item.id"
+						type="button"
+						class="chip bg-white"
+						@click="handleSelectContainer(item.id)"
+					>
+						<span class="header">
+							<span class="name" v-text="Text.display(item.name)" />
+							<span :class="['state', resolveStateClass(item.state)]" v-text="resolveStateText(item.state)" />
+						</span>
+						<span class="content">
+							<span class="img clip-text" v-text="Text.display(item.image)" />
+							<span class="health keep-text" v-text="resolveHealthText(item.healthStatus)" />
+						</span>
+						<span class="bottom">
+							<span class="id" v-text="Text.display(item.id.slice(0, 12))" />
+						</span>
+					</button>
+				</div>
+			</t-cell-group>
+		</template>
+		<t-empty v-else description="暂无 Docker 容器数据" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import DockerAPI from "@/api/DockerAPI";
+import type { DockerContainerSummaryView } from "@/types/Docker";
+import { useSettingStore } from "@/store/settingStore";
+import { Text } from "timi-web";
+
+defineOptions({
+	name: "DockerDashboard"
+});
+
+const router = useRouter();
+const settingStore = useSettingStore();
+
+async function handleSelectContainer(containerId: string): Promise<void> {
+	await router.push({
+		name: "DockerContainerDetail",
+		query: {
+			containerId,
+			tab: "docker"
+		}
+	});
+}
+
+// ---------- 格式化 ----------
+
+function resolveStateClass(state?: string | null): string {
+	if (state === "running") {
+		return "ok";
+	}
+	if (state === "exited" || state === "dead") {
+		return "err";
+	}
+	return "wait";
+}
+
+function resolveStateText(state?: string | null): string {
+	if (!state) {
+		return "-";
+	}
+	const map: Record<string, string> = {
+		created: "已创建",
+		running: "运行中",
+		restarting: "重启中",
+		exited: "已退出",
+		paused: "已暂停",
+		dead: "已停止"
+	};
+	return map[state] || state;
+}
+
+function resolveHealthText(health?: string | null): string {
+	if (!health) {
+		return "未配置";
+	}
+	const map: Record<string, string> = {
+		healthy: "健康",
+		unhealthy: "异常",
+		starting: "启动中"
+	};
+	return map[health] || health;
+}
+
+// ---------- 数据加载 ----------
+
+const isListLoading = ref(false);
+const containerItems = ref<DockerContainerSummaryView[]>([]);
+const containerOverviewStats = computed(() => {
+	const overview = {
+		total: containerItems.value.length,
+		running: 0,
+		stopped: 0,
+		other: 0
+	};
+
+	for (const item of containerItems.value) {
+		const stateClass = resolveStateClass(item.state);
+		if (stateClass === "ok") {
+			overview.running += 1;
+			continue;
+		}
+		if (stateClass === "err") {
+			overview.stopped += 1;
+			continue;
+		}
+		overview.other += 1;
+	}
+
+	return [
+		{ key: "total", label: "总数", value: overview.total, className: "all" },
+		{ key: "running", label: "运行中", value: overview.running, className: "ok" },
+		{ key: "stopped", label: "已停止", value: overview.stopped, className: "err" },
+		{ key: "other", label: "其他", value: overview.other, className: "wait" }
+	];
+});
+let listTimer: number | null = null;
+
+watch(() => settingStore.dashboard.server, restartAutoRefresh, { deep: true });
+onMounted(restartAutoRefresh);
+
+onUnmounted(() => {
+	clearAutoRefreshTimer();
+});
+
+async function refreshContainers(): Promise<void> {
+	if (isListLoading.value) {
+		return;
+	}
+	isListLoading.value = true;
+	try {
+		const list = await DockerAPI.getContainers();
+		containerItems.value = list.slice().sort((left, right) => left.name.localeCompare(right.name));
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isListLoading.value = false;
+	}
+}
+
+function restartAutoRefresh(): void {
+	void refreshContainers();
+	clearAutoRefreshTimer();
+	const snapshotIntervalMs = Math.max(settingStore.dashboard.server.snapshotRefreshSeconds, 1) * 1000;
+	listTimer = window.setInterval(() => {
+		void refreshContainers();
+	}, snapshotIntervalMs);
+}
+
+function clearAutoRefreshTimer(): void {
+	if (listTimer !== null) {
+		window.clearInterval(listTimer);
+		listTimer = null;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.docker-dashboard {
+	gap: 1rem;
+	display: flex;
+	padding: 0 0 1rem 0;
+	flex-direction: column;
+
+	.section {
+
+		&.overview {
+			gap: .6rem;
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+
+			.stat {
+				gap: .25rem;
+				display: flex;
+				padding: .5rem;
+				border-radius: .5rem;
+				flex-direction: column;
+
+				.label {
+					color: var(--app-sub);
+					font-size: .72rem;
+				}
+
+				.value {
+					font-size: .95rem;
+					font-weight: 700;
+					color: var(--app-text);
+
+					&.ok {
+						color: #047857;
+					}
+
+					&.err {
+						color: #b42318;
+					}
+
+					&.wait {
+						color: #8a5b00;
+					}
+				}
+			}
+		}
+
+		&.list {
+			gap: .6rem;
+			display: grid;
+			grid-template-columns: repeat(2, minmax(0, 1fr));
+
+			.chip {
+				gap: .45rem;
+				border: 0;
+				display: flex;
+				cursor: pointer;
+				padding: .6rem;
+				text-align: left;
+				border-radius: .75rem;
+				flex-direction: column;
+
+				.header,
+				.content {
+					gap: .45rem;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+				}
+
+				.header {
+
+					.name {
+						flex: 1;
+						color: var(--app-text);
+						font-size: .85rem;
+						font-weight: 700;
+						overflow: hidden;
+						white-space: nowrap;
+						text-overflow: ellipsis;
+					}
+
+					.state {
+						flex: none;
+						padding: .1rem .4rem;
+						border-radius: .25rem;
+
+						&.ok {
+							color: #047857;
+							background: rgba(16, 185, 129, .15);
+						}
+
+						&.err {
+							color: #b42318;
+							background: rgba(250, 76, 76, .14);
+						}
+
+						&.wait {
+							color: #8a5b00;
+							background: rgba(245, 158, 11, .18);
+						}
+					}
+				}
+
+				.img,
+				.health {
+					color: var(--app-sub);
+					font-size: .72rem;
+				}
+
+				.bottom {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.id {
+						color: var(--app-sub);
+						font-size: .72rem;
+					}
+
+					.goto {
+						color: var(--td-brand-color);
+						font-size: .72rem;
+					}
+				}
+			}
+		}
+	}
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+
+:global(.theme-dark) .docker-dashboard .section.list .chip {
+	background: rgba(255, 255, 255, .06);
+
+	.state {
+
+		&.ok {
+			color: #86efac;
+		}
+
+		&.err {
+			color: #fda4af;
+		}
+
+		&.wait {
+			color: #fcd34d;
+		}
+	}
+}
+
+:global(.theme-dark) .docker-dashboard .section.overview .stat {
+	background: rgba(255, 255, 255, .06);
+
+	.value {
+
+		&.ok {
+			color: #86efac;
+		}
+
+		&.err {
+			color: #fda4af;
+		}
+
+		&.wait {
+			color: #fcd34d;
+		}
+	}
+}
+</style>
--- a/src/pages/dashboard/ServerDashboard/ServerDashboard.vue
+++ b/src/pages/dashboard/ServerDashboard/ServerDashboard.vue
@@ -0,0 +1,801 @@
+<template>
+	<div class="server-dashboard">
+		<div v-if="isSnapshotLoading && !snapshotView" class="loading-wrap">
+			<t-loading text="加载系统状态..." />
+		</div>
+		<template v-else-if="snapshotView">
+			<t-cell-group title="系统" theme="card">
+				<t-cell title="操作系统" :note="Text.display(snapshotView?.snapshot?.os?.name)" />
+				<t-cell title="启动时间" :note="Time.toPassedDateTime(snapshotView?.snapshot?.os?.bootAt)" />
+				<t-cell
+					v-if="snapshotView?.snapshot?.os?.bootAt"
+					title="运行时长"
+					:note="Time.duration(Time.now() - snapshotView?.snapshot?.os?.bootAt)"
+				/>
+				<t-cell title="更多" arrow @click="router.push({
+						path: '/server/system-detail',
+						query: {
+							tab: 'server'
+						}
+					})"
+				/>
+			</t-cell-group>
+			<t-cell-group class="section performance" title="资源" theme="card">
+				<t-cell-info label="CPU" :value="Text.display(snapshotView?.snapshot?.cpu?.model)">
+					<progress-group
+						mode="heap"
+						:progress="cpuProgressList"
+						:note="Text.unit((snapshotView?.snapshot?.cpu?.usageTotal || 0) * 100, '%')"
+					/>
+				</t-cell-info>
+				<t-cell-info class="memory" label="内存" :value="memoryUsageText">
+					<progress-group
+						mode="splice"
+						:progress="memoryProgressList"
+						:note="Text.unit(memoryUsed * 100, '%')"
+					/>
+				</t-cell-info>
+				<t-cell-info class="memory-jvm" label="JVM 内存" :value="IOSize.format(jvmMemoryHeapMax)">
+					<progress-group
+						mode="heap"
+						:progress="jvmMemoryProgressList"
+						:note="Text.unit(jvmMemoryHeapCommited / jvmMemoryHeapMax * 100, '%')"
+					/>
+				</t-cell-info>
+				<t-cell title="网络发送速率" :note="IOSize.speed(snapshotView?.snapshot?.network?.txBytesPerSecond)">
+					<template #left-icon>
+						<t-icon name="arrow-up" />
+					</template>
+				</t-cell>
+				<t-cell title="网络接收速率" :note="IOSize.speed(snapshotView?.snapshot?.network?.rxBytesPerSecond)">
+					<template #left-icon>
+						<t-icon name="arrow-down" />
+					</template>
+				</t-cell>
+				<t-cell title="更多" arrow @click="router.push({
+						path: '/server/performance-detail',
+						query: {
+							tab: 'server'
+						}
+					})"
+				/>
+			</t-cell-group>
+			<t-cell-group class="section disk" title="磁盘" theme="card">
+				<t-cell-info
+					class="item"
+					v-for="item in snapshotView?.snapshot?.storagePartitions"
+					:key="item.uuid"
+					:label="item.mountPoint || item.partitionId"
+					:value="`${IOSize.format(item.used)} / ${IOSize.format(item.total)}`"
+					clip-text="label"
+				>
+					<progress-group
+						mode="heap"
+						:progress="[{
+							color: 'var(--td-brand-color)',
+							value: item.used / item.total
+						}]"
+						:note="Text.unit(item.used / item.total * 100, '%')"
+					/>
+				</t-cell-info>
+				<t-cell title="更多" arrow @click="router.push({
+						path: '/server/partitions-detail',
+						query: {
+							tab: 'server'
+						}
+					})"
+				/>
+			</t-cell-group>
+		</template>
+		<t-empty v-else description="暂无系统状态数据" />
+		<t-cell-group class="section history" title="历史采样" theme="card">
+			<t-tabs class="metric-tabs" :value="historyMetric" @change="handleHistoryMetricChange">
+				<t-tab-panel
+					v-for="item in historyMetricTabs"
+					:key="item.value"
+					:value="item.value"
+					:label="item.label"
+				/>
+			</t-tabs>
+			<div v-if="isHistoryLoading && !historyItems.length" class="loading-wrap">
+				<t-loading text="加载历史数据..." />
+			</div>
+			<template v-else-if="historyItems.length">
+				<v-chart
+					ref="chartRef"
+					class="chart"
+					:option="historyChartOption"
+					:update-options="historyChartUpdateOptions"
+					:autoresize="true"
+				/>
+				<div class="slider bg-white">
+					<span class="label">较早</span>
+					<t-slider
+						class="control"
+						:min="0"
+						:max="Math.max(historyItems.length - historyVisibleCount, 0)"
+						:step="1"
+						:value="historySliderValue"
+						@change="handleHistorySliderChange"
+					/>
+					<span class="label">最新</span>
+				</div>
+				<t-cell-group>
+					<t-cell v-for="item in currentHistorySummary" :key="item.label" :title="item.label" :note="item.value" />
+				</t-cell-group>
+			</template>
+			<t-empty v-else description="暂无历史采样数据" />
+		</t-cell-group>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import { use } from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import VChart from "vue-echarts";
+import { useRouter } from "vue-router";
+import type { EChartsOption, SeriesOption } from "echarts";
+import SystemAPI from "@/api/SystemAPI";
+import type { SystemStatusHistoryPoint, SystemStatusSnapshotView } from "@/types/System";
+import type { DashboardHistoryMetric } from "@/store/settingStore";
+import { useSettingStore } from "@/store/settingStore";
+import { IOSize, type LabelValue, Text, Time } from "timi-web";
+import TCellInfo from "@/components/TCellInfo.vue";
+import type { ProgressItem } from "@/components/ProgressGroup.vue";
+import ProgressGroup from "@/components/ProgressGroup.vue";
+
+type HistoryMetric = DashboardHistoryMetric;
+
+use([
+	SVGRenderer,
+	LineChart,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent
+]);
+
+defineOptions({
+	name: "ServerDashboard"
+});
+
+const router = useRouter();
+const settingStore = useSettingStore();
+
+const isSnapshotLoading = ref(false);
+const snapshotView = ref<SystemStatusSnapshotView | null>(null);
+
+// ---------- CPU ----------
+
+const cpuProgressList = computed<ProgressItem[]>(() => {
+	const system = snapshotView.value?.snapshot?.cpu?.usageSystem || 0;
+	const total = snapshotView.value?.snapshot?.cpu?.usageTotal || 0;
+	return [
+		{
+			color: "var(--td-brand-color)",
+			value: system,
+			legend: `系统占用（${Text.unit(system * 100, '%')}）`
+		},
+		{
+			color: "var(--td-brand-color-5)",
+			value: total,
+			legend: `总占用（${Text.unit(total * 100, '%')}）`
+		}
+	];
+});
+
+// ---------- 内存 ----------
+
+const memoryUsed = computed(() => {
+	const usedBytes = snapshotView.value?.snapshot?.memory?.usedBytes || 1;
+	const totalBytes = snapshotView.value?.snapshot?.memory?.totalBytes || 1;
+	return usedBytes / totalBytes;
+});
+const memoryUsageText = computed(() => {
+	const usedBytes = snapshotView.value?.snapshot?.memory?.usedBytes;
+	const totalBytes = snapshotView.value?.snapshot?.memory?.totalBytes;
+	return `${IOSize.format(usedBytes)} / ${IOSize.format(totalBytes)}`;
+});
+const memoryTotal = computed(() => {
+	const total = snapshotView.value?.snapshot?.memory?.totalBytes || 0;
+	const totalSwap = snapshotView.value?.snapshot?.memory?.swapTotalBytes || 0;
+	return total + totalSwap;
+});
+const memoryProgressList = computed<ProgressItem[]>(() => {
+	const used = snapshotView.value?.snapshot?.memory?.usedBytes || 0;
+	const usedSwap = snapshotView.value?.snapshot?.memory?.swapUsedBytes || 0;
+	return [
+		{
+			color: "var(--td-brand-color)",
+			value: used / memoryTotal.value,
+			legend: `物理（${IOSize.format(used)}）`
+		},
+		{
+			color: "var(--td-brand-color-5)",
+			value: usedSwap / memoryTotal.value,
+			legend: `交换区（${IOSize.format(usedSwap)}）`
+		}
+	]
+});
+
+// ---------- JVM 内存 ----------
+
+const jvmMemoryHeapMax = computed(() => snapshotView.value?.snapshot?.jvm?.heapMaxBytes || 0);
+const jvmMemoryHeapCommited = computed(() => snapshotView.value?.snapshot?.jvm?.heapCommittedBytes || 0);
+const jvmMemoryHeapUsed = computed(() => snapshotView.value?.snapshot?.jvm?.heapUsedBytes || 0);
+const jvmMemoryProgressList = computed<ProgressItem[]>(() => {
+	return [
+		{
+			color: "var(--td-brand-color)",
+			value: jvmMemoryHeapCommited.value / jvmMemoryHeapMax.value,
+			legend: `已提交（${IOSize.format(jvmMemoryHeapCommited.value)}）`
+		},
+		{
+			color: "var(--td-brand-color-5)",
+			value: jvmMemoryHeapUsed.value / jvmMemoryHeapMax.value,
+			legend: `已使用（${IOSize.format(jvmMemoryHeapUsed.value)}）`
+		},
+	]
+})
+
+// ---------- 历史采样图表 ----------
+
+const isHistoryLoading = ref(false);
+const historyPoints = ref<SystemStatusHistoryPoint[]>([]);
+const chartRef = ref<InstanceType<typeof VChart> | null>(null);
+const historyChartUpdateOptions = Object.freeze({
+	notMerge: true
+});
+const isDarkTheme = ref(false);
+
+// ---------- Tab ----------
+
+const historyMetric = ref<HistoryMetric>("cpu");
+
+const historyMetricTabs = computed(() => {
+	const labelMap: Record<HistoryMetric, string> = {
+		cpu: "CPU",
+		memory: "内存",
+		jvm: "JVM",
+		network: "网络"
+	};
+
+	return settingStore.dashboard.server.historyMetrics.map((metric) => ({
+		value: metric,
+		label: labelMap[metric]
+	}));
+});
+watch(
+	() => historyMetricTabs.value,
+	(tabs) => {
+		if (!tabs.length) {
+			historyMetric.value = "cpu";
+			return;
+		}
+
+		if (!tabs.some((item) => item.value === historyMetric.value)) {
+			historyMetric.value = tabs[0].value;
+		}
+	},
+	{ immediate: true }
+);
+
+function handleHistoryMetricChange(value: string): void {
+	const nextValue = value as HistoryMetric;
+	if (nextValue === "cpu" || nextValue === "memory" || nextValue === "jvm" || nextValue === "network") {
+		historyMetric.value = nextValue;
+	}
+}
+
+// ---------- 图表数据 ----------
+
+const historyItems = computed<SystemStatusHistoryPoint[]>(() => {
+	return historyPoints.value.slice().sort((left, right) => left.at - right.at);
+});
+const currentHistoryRange = computed(() => {
+	const length = historyItems.value.length;
+	if (length < 1) {
+		return { startValue: 0, endValue: 0 };
+	}
+
+	const startValue = Math.min(Math.max(Math.floor(historySliderValue.value), 0), historySliderMaxStart.value);
+	const endValue = Math.min(startValue + historyVisibleCount.value - 1, length - 1);
+	return { startValue, endValue };
+});
+const visibleHistoryItems = computed<SystemStatusHistoryPoint[]>(() => {
+	if (!historyItems.value.length) {
+		return [];
+	}
+	return historyItems.value.slice(currentHistoryRange.value.startValue, currentHistoryRange.value.endValue + 1);
+});
+
+// ---------- 调整图表数据范围 ----------
+
+const isHistorySliderTouched = ref(false);
+const historySliderValue = ref(0);
+const HISTORY_DEFAULT_VISIBLE_COUNT = 30;
+
+const historyVisibleCount = computed(() => {
+	if (historyItems.value.length < 1) {
+		return 1;
+	}
+	return Math.min(HISTORY_DEFAULT_VISIBLE_COUNT, historyItems.value.length);
+});
+const historySliderMaxStart = computed(() => {
+	return Math.max(historyItems.value.length - historyVisibleCount.value, 0);
+});
+watch(() => historyItems.value.length, (length) => {
+	if (length < 1) {
+		historySliderValue.value = 0;
+		isHistorySliderTouched.value = false;
+		return;
+	}
+	if (!isHistorySliderTouched.value) {
+		historySliderValue.value = historySliderMaxStart.value;
+		return;
+	}
+	historySliderValue.value = Math.min(historySliderValue.value, historySliderMaxStart.value);
+});
+
+function handleHistorySliderChange(value: number): void {
+	historySliderValue.value = Math.min(Math.max(Math.floor(value), 0), historySliderMaxStart.value);
+	isHistorySliderTouched.value = true;
+}
+
+// ---------- 当前图表摘要 ----------
+
+const currentHistorySummary = computed<LabelValue<string, any>[]>(() => {
+	if (!historyItems.value.length) {
+		return [];
+	}
+	const lastPoint = historyItems.value[historyItems.value.length - 1];
+	const summary: LabelValue<string, any>[] = [];
+	if (historyMetric.value === "cpu") {
+		summary.push(
+			{ label: "总使用率", value: Text.unit(lastPoint.cpuUsagePercent * 100, "%") },
+			{ label: "系统使用率", value: Text.unit(lastPoint.cpuSystemPercent * 100, "%") }
+		);
+		return summary;
+	}
+	if (historyMetric.value === "memory") {
+		summary.push(
+			{ label: "物理", value: IOSize.format(lastPoint.memoryUsedBytes) },
+			{ label: "交换区", value: IOSize.format(lastPoint.swapUsedBytes) }
+		);
+		return summary;
+	}
+	if (historyMetric.value === "jvm") {
+		summary.push(
+			{ label: "已使用", value: IOSize.format(lastPoint.heapUsedBytes) },
+			{ label: "已提交", value: IOSize.format(lastPoint.heapCommittedBytes) },
+			{ label: "GC 周期耗时", value: Text.unit(lastPoint.gcCycleTimeMs, "毫秒") },
+			{ label: "GC 暂停耗时", value: Text.unit(lastPoint.gcPauseTimeMs, "毫秒") }
+		);
+		return summary;
+	}
+	summary.push(
+		{ label: "接收", value: IOSize.speed(lastPoint.rxBytesPerSecond) },
+		{ label: "发送", value: IOSize.speed(lastPoint.txBytesPerSecond) }
+	);
+	return summary;
+});
+
+// ---------- 图表配置 ----------
+
+const historyChartOption = computed((): EChartsOption => {
+	const axisColor = isDarkTheme.value ? "#9aa4b2" : "#7e8a9a";
+	const lineColor = isDarkTheme.value ? "rgba(255, 255, 255, .12)" : "rgba(18, 42, 66, .08)";
+	const legendColor = isDarkTheme.value ? "#d7dee8" : "#334155";
+	const memoryAxisMax = Math.max(snapshotView.value?.snapshot?.memory?.totalBytes || 0, 1);
+
+	// 通用配置
+	const commonOption: EChartsOption = {
+		tooltip: {
+			trigger: "axis",
+			confine: true,
+			position: (point, _params, _dom, _rect, size) => {
+				const gap = 6;
+				const fingerGap = 24;
+				const contentSize = size?.contentSize || [0, 0];
+				const viewSize = size?.viewSize || [0, 0];
+				const maxLeft = Math.max(viewSize[0] - contentSize[0] - gap, gap);
+				const maxTop = Math.max(viewSize[1] - contentSize[1] - gap, gap);
+				const clamp = (value: number, min: number, max: number): number => {
+					return Math.min(Math.max(value, min), max);
+				};
+				const preferLeft = point[0] - contentSize[0] - gap;
+				const preferRight = point[0] + gap;
+				const left = point[0] < viewSize[0] / 2
+					? clamp(preferRight, gap, maxLeft)
+					: clamp(preferLeft, gap, maxLeft);
+				const preferTop = point[1] - contentSize[1] - fingerGap;
+				const preferBottom = point[1] + fingerGap;
+				const top = preferTop >= gap
+					? clamp(preferTop, gap, maxTop)
+					: clamp(preferBottom, gap, maxTop);
+				return [left, top];
+			}
+		},
+		legend: {
+			top: 10,
+			textStyle: {
+				color: legendColor
+			}
+		},
+		grid: {
+			top: 40,
+			left: 8,
+			right: 8,
+			bottom: 8,
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: false,
+			data: visibleHistoryItems.value.map((item) => item.at),
+			axisLabel: {
+				color: axisColor,
+				formatter: val => Time.toShortTime(Number(val))
+			},
+			axisLine: {
+				lineStyle: {
+					color: lineColor
+				}
+			}
+		}
+	};
+	if (!historyItems.value.length) {
+		return commonOption;
+	}
+	if (historyMetric.value === "cpu") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: params => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`
+					const lines = list.map(item => `${item.marker}${item.seriesName}: ${Text.unit(Number(item.value) * 100, " %")}`);
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: {
+				type: "value",
+				min: 0,
+				max: 1,
+				axisLabel: {
+					color: axisColor,
+					formatter: val => `${val * 100} %`
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("总使用率", visibleHistoryItems.value.map((item) => item.cpuUsagePercent!)),
+				resolveLineSeries("系统使用率", visibleHistoryItems.value.map((item) => item.cpuSystemPercent!))
+			]
+		};
+	}
+	if (historyMetric.value === "memory") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: (params) => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`
+					const lines = list.map(item => `${item.marker}${item.seriesName}: ${IOSize.format(Number(item.value))}`);
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: {
+				type: "value",
+				max: memoryAxisMax,
+				axisLabel: {
+					color: axisColor,
+					formatter: (value: number) => IOSize.format(value)
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("物理", visibleHistoryItems.value.map((item) => item.memoryUsedBytes!)),
+				resolveLineSeries("交换区", visibleHistoryItems.value.map((item) => item.swapUsedBytes!))
+			]
+		};
+	}
+	if (historyMetric.value === "jvm") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: (params) => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`
+					const lines = list.map(item => {
+						const seriesName = item?.seriesName || "";
+						if (seriesName === "GC 周期耗时" || seriesName === "GC 暂停耗时") {
+							return `${item.marker}${item.seriesName}: ${Text.unit(Number(item.value), " 毫秒")}`
+						} else {
+							return `${item.marker}${item.seriesName}: ${IOSize.format(Number(item.value))}`
+						}
+					});
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: [
+				{
+					type: "value",
+					axisLabel: {
+						color: axisColor,
+						formatter: (val: number) => IOSize.format(val)
+					},
+					splitLine: {
+						lineStyle: {
+							color: lineColor
+						}
+					}
+				},
+				{
+					type: "value",
+					axisLabel: {
+						color: axisColor,
+						formatter: "{value} ms"
+					},
+					splitLine: {
+						show: false
+					}
+				}
+			],
+			series: [
+				resolveLineSeries("已使用", visibleHistoryItems.value.map((item) => item.heapUsedBytes!)),
+				resolveLineSeries("已提交", visibleHistoryItems.value.map((item) => item.heapCommittedBytes!)),
+				resolveLineSeries("GC 周期", visibleHistoryItems.value.map((item) => item.gcCycleTimeMs!), 1),
+				resolveLineSeries("GC 暂停", visibleHistoryItems.value.map((item) => item.gcPauseTimeMs!), 1)
+			]
+		};
+	}
+	if (historyMetric.value === "network") {
+		return {
+			// 网络
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: (params) => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`
+					const lines = list.map(item => `${item.marker}${item.seriesName}: ${IOSize.speed(Number(item.value))}`);
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: {
+				type: "value",
+				axisLabel: {
+					color: axisColor,
+					formatter: (val: number) => IOSize.format(val)
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("接收", visibleHistoryItems.value.map((item) => item.rxBytesPerSecond!)),
+				resolveLineSeries("发送", visibleHistoryItems.value.map((item) => item.txBytesPerSecond!))
+			]
+		};
+	}
+	return commonOption;
+});
+
+watch(() => settingStore.dashboard.server, restartAutoRefresh, { deep: true });
+
+function resolveLineSeries(name: string, data: Array<number | null>, yAxisIndex?: number): SeriesOption {
+	const series: SeriesOption = {
+		type: "line",
+		name,
+		showSymbol: false,
+		smooth: true,
+		lineStyle: {
+			width: 2
+		},
+		areaStyle: {
+			opacity: .18
+		},
+		data
+	};
+
+	if (typeof yAxisIndex === "number") {
+		series.yAxisIndex = yAxisIndex;
+	}
+
+	return series;
+}
+
+// ---------- 加载数据：当前状态 ----------
+
+let snapshotTimer: number | undefined;
+onUnmounted(() => {
+	window.clearInterval(snapshotTimer);
+	snapshotTimer = undefined;
+});
+
+async function refreshSnapshot(): Promise<void> {
+	if (isSnapshotLoading.value) {
+		return;
+	}
+	isSnapshotLoading.value = true;
+	try {
+		const metrics = settingStore.dashboard.server.snapshotMetrics.join(",");
+		snapshotView.value = await SystemAPI.getStatus(metrics);
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isSnapshotLoading.value = false;
+	}
+}
+
+// ---------- 加载数据：历史采集 ----------
+
+let historyTimer: number | undefined;
+
+async function refreshHistory(): Promise<void> {
+	if (isHistoryLoading.value) {
+		return;
+	}
+	isHistoryLoading.value = true;
+	try {
+		const metrics = settingStore.dashboard.server.historyMetrics.join(",");
+		const historyView = await SystemAPI.getStatusHistory({
+			window: "1h",
+			metrics
+		});
+		historyPoints.value = historyView.points || [];
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isHistoryLoading.value = false;
+	}
+}
+
+onUnmounted(() => {
+	window.clearInterval(historyTimer);
+	historyTimer = undefined;
+});
+
+// ---------- 自动刷新 ----------
+
+watch(() => settingStore.dashboard.server, restartAutoRefresh, { deep: true });
+
+async function refreshDashboard(): Promise<void> {
+	await Promise.all([
+		refreshSnapshot(),
+		refreshHistory()
+	]);
+}
+function restartAutoRefresh(): void {
+	void refreshDashboard();
+	clearAutoRefreshTimer();
+
+	const snapshotIntervalMs = Math.max(settingStore.dashboard.server.snapshotRefreshSeconds, 1) * 1000;
+	const historyIntervalMs = Math.max(settingStore.dashboard.server.historyRefreshSeconds, 1) * 1000;
+
+	snapshotTimer = window.setInterval(() => {
+		void refreshSnapshot();
+	}, snapshotIntervalMs);
+
+	historyTimer = window.setInterval(() => {
+		void refreshHistory();
+	}, historyIntervalMs);
+}
+
+function clearAutoRefreshTimer(): void {
+	if (snapshotTimer !== null) {
+		window.clearInterval(snapshotTimer);
+		snapshotTimer = undefined;
+	}
+	if (historyTimer !== null) {
+		window.clearInterval(historyTimer);
+		historyTimer = undefined;
+	}
+}
+onMounted(restartAutoRefresh);
+</script>
+
+<style scoped lang="less">
+.server-dashboard {
+	gap: 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.section {
+
+		&.disk {
+
+			.collapses {
+
+				:deep(.t-cell__title) {
+					margin-right: 0;
+				}
+
+				.content {
+					width: 100%;
+					gap: .4rem;
+					display: flex;
+					flex-direction: column;
+
+					.header {
+						gap: .5rem;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+
+						.title {
+							color: var(--app-text);
+							font-size: .875rem;
+							font-weight: bold;
+						}
+
+						.health {
+							font-size: .75rem;
+							color: var(--app-sub);
+						}
+					}
+				}
+			}
+		}
+
+		&.history {
+			.metric-tabs {
+				width: 100%;
+				--td-tab-track-width: 4rem;
+			}
+
+			.chart {
+				width: 100%;
+				height: 16rem;
+				background: #FFF;
+			}
+
+			.slider {
+				gap: .5rem;
+				display: flex;
+				padding: .5rem 2rem;
+				align-items: center;
+
+				.label {
+					flex: none;
+					font-size: .75rem;
+					color: var(--app-sub);
+				}
+
+				.control {
+					flex: 1;
+				}
+			}
+		}
+	}
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
--- a/src/pages/dashboard/ServerDashboard/ServerDetail.vue
+++ b/src/pages/dashboard/ServerDashboard/ServerDetail.vue
@@ -0,0 +1,91 @@
+<template>
+	<div class="server-detail">
+		<div v-if="isLoading && !snapshotView" class="loading-wrap">
+			<t-loading text="加载系统详情..." />
+		</div>
+		<template v-else-if="snapshotView">
+			<t-cell-group title="系统" theme="card">
+				<t-cell title="服务器时间" :note="Time.toDateTime(snapshotView.serverTime)" />
+				<t-cell title="采样周期" :note="`${snapshotView.sampleRateMs} ms`" />
+				<t-cell title="操作系统" :note="os?.name" />
+				<t-cell title="启动时间" :note="Time.toPassedDateTime(os?.bootAt)" />
+			</t-cell-group>
+			<t-cell-group title="硬件信息" theme="card">
+				<t-cell title="主板厂商" :note="hardware?.baseboard?.manufacturer" />
+				<t-cell title="主板型号" :note="hardware?.baseboard?.model" />
+				<t-cell title="主板版本" :note="hardware?.baseboard?.version" />
+				<t-cell title="主板序列号" :note="hardware?.baseboard?.serialNumber" />
+				<t-cell title="固件厂商" :note="hardware?.firmware?.manufacturer" />
+				<t-cell title="固件名称" :note="hardware?.firmware?.name" />
+				<t-cell-info label="固件描述" :value="hardware?.firmware?.description" />
+				<t-cell title="固件版本" :note="hardware?.firmware?.version" />
+				<t-cell title="固件发布日期" :note="hardware?.firmware?.releaseDate" />
+			</t-cell-group>
+		</template>
+		<t-empty v-else description="暂无系统详情数据" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import SystemAPI from "@/api/SystemAPI";
+import type { SystemStatusSnapshotView } from "@/types/System";
+import { Time } from "timi-web";
+
+defineOptions({
+	name: "ServerDetail"
+});
+
+const isLoading = ref(false);
+const snapshotView = ref<SystemStatusSnapshotView | null>(null);
+const refreshIntervalMs = 3000;
+let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+const os = computed(() => snapshotView.value?.snapshot?.os);
+const hardware = computed(() => snapshotView.value?.snapshot?.hardware);
+
+onMounted(() => {
+	void refreshDetail();
+	refreshTimer = setInterval(() => {
+		void refreshDetail();
+	}, refreshIntervalMs);
+});
+
+onUnmounted(() => {
+	if (!refreshTimer) {
+		return;
+	}
+	clearInterval(refreshTimer);
+	refreshTimer = null;
+});
+
+async function refreshDetail(): Promise<void> {
+	if (isLoading.value) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		snapshotView.value = await SystemAPI.getStatus("os,hardware");
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isLoading.value = false;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.server-detail {
+	padding: var(--app-nav-offset) 0 1rem 0;
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
--- a/src/pages/dashboard/ServerDashboard/ServerPartitionsDetail.vue
+++ b/src/pages/dashboard/ServerDashboard/ServerPartitionsDetail.vue
@@ -0,0 +1,113 @@
+<template>
+	<div class="server-partitions-detail">
+		<div v-if="isLoading && partitions.length < 1" class="loading-wrap">
+			<t-loading text="加载磁盘详情..." />
+		</div>
+		<template v-else-if="partitions.length">
+			<t-cell-group
+				v-for="item in partitions"
+				:key="item.uuid"
+				:title="resolvePartitionTitle(item)"
+				theme="card"
+			>
+				<t-cell title="磁盘名称" :note="Text.display(item.diskName)" />
+				<t-cell-info label="磁盘型号" :value="Text.display(item.diskModel)" />
+				<t-cell-info label="磁盘序列号" :value="Text.display(item.diskSerial)" />
+				<t-cell title="分区 ID" :note="Text.display(item.partitionId)" />
+				<t-cell-info label="分区名称" :value="Text.display(item.partitionName)" />
+				<t-cell title="分区类型" :note="Text.display(item.partitionType)" />
+				<t-cell-info label="UUID" :value="Text.display(item.uuid)" />
+				<t-cell title="总容量" :note="IOSize.format(item.total)" />
+				<t-cell title="已使用" :note="IOSize.format(item.used)" />
+				<t-cell title="可用容量" :note="IOSize.format(item.total - item.used)" />
+				<t-cell title="使用率" :note="Text.unit(item.used / item.total * 100, '%')" />
+				<t-cell
+					v-if="typeof item.transferTimeMs === 'number'"
+					title="传输耗时"
+					:note="Text.unit(item.transferTimeMs, '毫秒')"
+				/>
+				<t-cell v-if="item.healthStatus" title="健康状态" :note="item.healthStatus" />
+			</t-cell-group>
+		</template>
+		<t-empty v-else description="暂无磁盘详情数据" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import SystemAPI from "@/api/SystemAPI";
+import type { SystemStatusSnapshot, SystemStatusSnapshotView } from "@/types/System";
+import { IOSize, Text } from "timi-web";
+
+type Partition = NonNullable<SystemStatusSnapshot["storagePartitions"]>[number];
+
+defineOptions({
+	name: "ServerPartitionsDetail"
+});
+
+const isLoading = ref(false);
+const snapshotView = ref<SystemStatusSnapshotView | null>(null);
+const refreshIntervalMs = 3000;
+let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+const partitions = computed<Partition[]>(() => {
+	const list = snapshotView.value?.snapshot?.storagePartitions || [];
+	return list.slice().sort((left, right) => {
+		return (right.used / Math.max(right.total, 1)) - (left.used / Math.max(left.total, 1));
+	});
+});
+
+onMounted(() => {
+	void refreshDetail();
+	refreshTimer = setInterval(() => {
+		void refreshDetail();
+	}, refreshIntervalMs);
+});
+
+onUnmounted(() => {
+	if (!refreshTimer) {
+		return;
+	}
+	clearInterval(refreshTimer);
+	refreshTimer = null;
+});
+
+function resolvePartitionTitle(item: Partition): string {
+	const mountPoint = Text.display(item.mountPoint);
+	const partitionId = Text.display(item.partitionId);
+	if (partitionId !== "-") {
+		return `${mountPoint} (${partitionId})`;
+	}
+	return mountPoint;
+}
+
+async function refreshDetail(): Promise<void> {
+	if (isLoading.value) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		snapshotView.value = await SystemAPI.getStatus("storage");
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isLoading.value = false;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.server-partitions-detail {
+	padding: var(--app-nav-offset) 0 1rem 0;
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
--- a/src/pages/dashboard/ServerDashboard/ServerPerformanceDetail.vue
+++ b/src/pages/dashboard/ServerDashboard/ServerPerformanceDetail.vue
@@ -0,0 +1,122 @@
+<template>
+	<div class="server-performance-detail">
+		<div v-if="isLoading && !snapshotView" class="loading-wrap">
+			<t-loading text="加载资源详情..." />
+		</div>
+		<template v-else-if="snapshotView">
+			<t-cell-group v-if="cpu" title="CPU" theme="card">
+				<t-cell-info label="型号" :value="cpu.model" />
+				<t-cell title="物理核心" :note="String(cpu.physicalCores)" />
+				<t-cell title="逻辑核心" :note="String(cpu.logicalCores)" />
+				<t-cell title="使用率" :note="Text.unit(cpu.usageTotal * 100, '%')" />
+				<t-cell title="系统使用率" :note="Text.unit(cpu.usageSystem * 100, '%')" />
+				<t-cell title="温度" :note="Text.unit(cpu.temperatureCelsius || 0, '℃')"></t-cell>
+			</t-cell-group>
+			<t-cell-group v-if="memory" title="内存" theme="card">
+				<t-cell title="物理内存" :note="IOSize.format(memory.totalBytes)" />
+				<t-cell title="已使用" :note="IOSize.format(memory.usedBytes)" />
+				<t-cell title="使用率" :note="Text.unit(memory.usedBytes / memory.totalBytes * 100, '%')" />
+				<t-cell title="交换区内存" :note="IOSize.format(memory.swapTotalBytes)" />
+				<t-cell title="交换区已使用" :note="IOSize.format(memory.swapUsedBytes)" />
+				<t-cell title="交换区使用率" :note="Text.unit(memory.swapUsedBytes / memory.swapTotalBytes * 100, '%')" />
+			</t-cell-group>
+			<t-cell-group v-if="jvm" title="JVM" theme="card">
+				<t-cell title="名称" :note="jvm.name" />
+				<t-cell title="版本" :note="jvm.version" />
+				<t-cell title="启动于" :note="Time.toPassedDateTime(jvm.bootAt)" />
+				<t-cell title="堆内存最大大小" :note="IOSize.format(jvm.heapMaxBytes)" />
+				<t-cell title="堆内存初始大小" :note="IOSize.format(jvm.heapInitBytes)" />
+				<t-cell title="堆内存已提交" :note="IOSize.format(jvm.heapCommittedBytes)" />
+				<t-cell title="堆内存申请率" :note="Text.unit(jvm.heapCommittedBytes / jvm.heapMaxBytes * 100, '%')" />
+				<t-cell title="堆内存已使用" :note="IOSize.format(jvm.heapUsedBytes)" />
+				<t-cell title="堆内存使用率" :note="Text.unit(jvm.heapUsedBytes / jvm.heapCommittedBytes * 100, '%')" />
+				<t-cell-info label="GC 收集器" :value="jvm.gc.collector" />
+				<t-cell title="GC 周期次数" :note="String(jvm.gc.cycleCount)" />
+				<t-cell title="GC 暂停次数" :note="String(jvm.gc.pauseCount)" />
+				<t-cell title="最近暂停时间" :note="Time.toPassedDateTime(jvm.gc.lastPauseAt)" />
+				<t-cell title="最近回收内存" :note="IOSize.format(jvm.gc.lastRecoveredBytes)" />
+			</t-cell-group>
+			<t-cell-group v-if="network" title="网络" theme="card">
+				<t-cell-info label="网卡" :value="network.interfaceName" />
+				<t-cell title="MAC" :note="network.mac" />
+				<t-cell title="接收速率" :note="IOSize.speed(network.rxBytesPerSecond)" />
+				<t-cell title="发送速率" :note="IOSize.speed(network.txBytesPerSecond)" />
+				<t-cell title="累计接收" :note="IOSize.format(network.rxTotalBytes)" />
+				<t-cell title="累计发送" :note="IOSize.format(network.txTotalBytes)" />
+				<t-cell title="累计接收包" :note="network.rxPacketsTotal.toLocaleString()" />
+				<t-cell title="累计发送包" :note="network.txPacketsTotal.toLocaleString()" />
+				<t-cell title="输入错误包" :note="String(network.inErrors)" />
+				<t-cell title="输出错误包" :note="String(network.outErrors)" />
+				<t-cell title="输入丢包" :note="String(network.inDrops)" />
+				<t-cell title="累计冲突" :note="String(network.collisions)" />
+			</t-cell-group>
+		</template>
+		<t-empty v-else description="暂无资源详情数据" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import SystemAPI from "@/api/SystemAPI";
+import type { SystemStatusSnapshotView } from "@/types/System";
+import { IOSize, Text, Time } from "timi-web";
+
+defineOptions({
+	name: "ServerPerformanceDetail"
+});
+
+const isLoading = ref(false);
+const snapshotView = ref<SystemStatusSnapshotView | null>(null);
+const refreshIntervalMs = 3000;
+let refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+const cpu = computed(() => snapshotView.value?.snapshot?.cpu);
+const memory = computed(() => snapshotView.value?.snapshot?.memory);
+const jvm = computed(() => snapshotView.value?.snapshot?.jvm);
+const network = computed(() => snapshotView.value?.snapshot?.network);
+
+onMounted(() => {
+	void refreshDetail();
+	refreshTimer = setInterval(() => {
+		void refreshDetail();
+	}, refreshIntervalMs);
+});
+
+onUnmounted(() => {
+	if (!refreshTimer) {
+		return;
+	}
+	clearInterval(refreshTimer);
+	refreshTimer = null;
+});
+
+async function refreshDetail(): Promise<void> {
+	if (isLoading.value) {
+		return;
+	}
+	isLoading.value = true;
+	try {
+		snapshotView.value = await SystemAPI.getStatus("cpu,memory,jvm,network");
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isLoading.value = false;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.server-performance-detail {
+	padding: var(--app-nav-offset) 0 1rem 0;
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
--- a/src/pages/dashboard/UPSDashboard/UPSDashboard.vue
+++ b/src/pages/dashboard/UPSDashboard/UPSDashboard.vue
@@ -0,0 +1,646 @@
+<template>
+	<div class="ups-dashboard">
+		<div v-if="isStatusLoading && !statusView" class="loading-wrap">
+			<t-loading text="加载 UPS 状态..." />
+		</div>
+		<template v-else-if="statusView">
+			<t-cell-group title="UPS 概览" theme="card">
+				<t-cell title="主机" :note="Text.display(statusView?.hostName)" />
+				<t-cell title="厂商" :note="Text.display(statusView?.customer)" />
+				<t-cell title="设备 ID" :note="Text.display(statusView?.deviceId)" />
+				<t-cell title="UPS 类型" :note="Text.display(statusView?.upsType)" />
+				<t-cell title="工作模式" :note="Text.display(statusView?.workMode)" />
+				<t-cell title="数据时间" :note="Time.toDateTime(statusView?.upsTime)" />
+				<t-cell title="输出状态" :note="Text.displayBool(statusView?.outputOn, '开启', '关闭')" />
+				<t-cell title="充电状态" :note="Text.displayBool(statusView?.charging, '充电中', '未充电')" />
+				<t-cell title="旁路状态" :note="Text.displayBool(statusView?.bypassActive, '旁路运行', '正常供电')" />
+				<t-cell title="关机状态" :note="Text.displayBool(statusView?.shutdownActive, '执行中', '未执行')" />
+			</t-cell-group>
+			<t-cell-group class="section energy" title="电池与负载" theme="card">
+				<t-cell-info label="电池容量" :value="Text.unit(statusView?.batteryCapacity, '%')">
+					<progress-group mode="heap" :progress="batteryProgressList" />
+				</t-cell-info>
+				<t-cell-info label="输出负载" :value="Text.unit(statusView?.outputLoadPercent, '%')">
+					<progress-group mode="heap" :progress="loadProgressList" />
+				</t-cell-info>
+				<t-cell title="剩余时间" :note="Text.unit(statusView?.batteryRemainTime, '分钟')" />
+			</t-cell-group>
+			<t-cell-group class="section electric" title="电气参数" theme="card">
+				<t-cell title="输入电压" :note="Text.unit(statusView?.inputVoltage, 'V')" />
+				<t-cell title="输入频率" :note="Text.unit(statusView?.inputFrequency, 'Hz')" />
+				<t-cell title="输出电压" :note="Text.unit(statusView?.outputVoltage, 'V')" />
+				<t-cell title="输出频率" :note="Text.unit(statusView?.outputFrequency, 'Hz')" />
+				<t-cell title="电池电压" :note="Text.unit(statusView?.batteryVoltage, 'V')" />
+				<t-cell title="温度" :note="Text.unit(statusView?.temperature, '℃')" />
+			</t-cell-group>
+			<t-cell-group v-if="faultList.length" class="section warning" title="告警与故障" theme="card">
+				<t-cell v-for="(item, index) in faultList" :key="`${item}-${index}`" :title="item" />
+			</t-cell-group>
+		</template>
+		<t-empty v-else description="暂无 UPS 状态数据" />
+		<t-cell-group class="section history" title="历史采样" theme="card">
+			<t-tabs class="metric-tabs" :value="historyMetric" @change="handleHistoryMetricChange">
+				<t-tab-panel v-for="item in historyMetricTabs" :key="item.value" :value="item.value" :label="item.label" />
+			</t-tabs>
+			<div v-if="isHistoryLoading && !historyItems.length" class="loading-wrap">
+				<t-loading text="加载 UPS 历史..." />
+			</div>
+			<template v-else-if="historyItems.length">
+				<v-chart
+					ref="chartRef"
+					class="chart"
+					:option="historyChartOption"
+					:update-options="historyChartUpdateOptions"
+					:autoresize="true"
+				/>
+				<div class="slider bg-white">
+					<span class="label">较早</span>
+					<t-slider
+						class="control"
+						:min="0"
+						:max="Math.max(historyItems.length - historyVisibleCount, 0)"
+						:step="1"
+						:value="historySliderValue"
+						@change="handleHistorySliderChange"
+					/>
+					<span class="label">最新</span>
+				</div>
+				<t-cell-group>
+					<t-cell v-for="item in historySummary" :key="item.label" :title="item.label" :note="item.value" />
+				</t-cell-group>
+			</template>
+			<t-empty v-else description="暂无 UPS 历史数据" />
+		</t-cell-group>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import { use } from "echarts/core";
+import { SVGRenderer } from "echarts/renderers";
+import { LineChart } from "echarts/charts";
+import { GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import VChart from "vue-echarts";
+import type { EChartsOption, SeriesOption } from "echarts";
+import UpsAPI from "@/api/UpsAPI";
+import type {
+	UpsHistoryPointView,
+	UpsStatusView
+} from "@/types/Ups";
+import { useSettingStore } from "@/store/settingStore";
+import { Text, Time } from "timi-web";
+import type { LabelValue } from "timi-web";
+import TCellInfo from "@/components/TCellInfo.vue";
+import type { ProgressItem } from "@/components/ProgressGroup.vue";
+import ProgressGroup from "@/components/ProgressGroup.vue";
+
+type UpsHistoryMetric = "battery" | "load" | "voltage" | "temperature";
+
+use([
+	SVGRenderer,
+	LineChart,
+	GridComponent,
+	TooltipComponent,
+	LegendComponent
+]);
+
+defineOptions({
+	name: "UPSDashboard"
+});
+
+const settingStore = useSettingStore();
+
+const isStatusLoading = ref(false);
+const isHistoryLoading = ref(false);
+const statusView = ref<UpsStatusView | null>(null);
+const historyPoints = ref<UpsHistoryPointView[]>([]);
+const chartRef = ref<InstanceType<typeof VChart> | null>(null);
+const historyChartUpdateOptions = Object.freeze({
+	notMerge: true
+});
+
+// ---------- 当前状态 ----------
+
+const batteryProgressList = computed<ProgressItem[]>(() => {
+	return [
+		{
+			color: "var(--td-brand-color)",
+			value: statusView.value?.batteryCapacity! / 100,
+		}
+	];
+});
+const loadProgressList = computed<ProgressItem[]>(() => {
+	return [
+		{
+			color: "var(--td-warning-color)",
+			value: statusView.value?.outputLoadPercent! / 100,
+		}
+	];
+});
+const faultList = computed<string[]>(() => {
+	const list: string[] = [];
+	const warningList = statusView.value?.warnings || [];
+	if (statusView.value?.faultType) {
+		list.push(`故障类型：${statusView.value.faultType}`);
+	}
+	if (statusView.value?.faultKind) {
+		list.push(`故障明细：${statusView.value.faultKind}`);
+	}
+	for (const item of warningList) {
+		list.push(`告警：${item}`);
+	}
+	return list;
+});
+
+// ---------- 历史采样 ----------
+
+const historyMetric = ref<UpsHistoryMetric>("battery");
+
+const historyMetricTabs = computed(() => {
+	const labelMap: Record<UpsHistoryMetric, string> = {
+		battery: "电池",
+		load: "负载",
+		voltage: "电压",
+		temperature: "温度"
+	};
+	return (Object.keys(labelMap) as UpsHistoryMetric[]).map((item) => ({
+		value: item,
+		label: labelMap[item]
+	}));
+});
+
+function handleHistoryMetricChange(value: string): void {
+	const nextValue = value as UpsHistoryMetric;
+	if (nextValue === "battery" || nextValue === "load" || nextValue === "voltage" || nextValue === "temperature") {
+		historyMetric.value = nextValue;
+	}
+}
+
+const historyItems = computed<UpsHistoryPointView[]>(() => {
+	return historyPoints.value.slice().sort((left, right) => left.at - right.at);
+});
+const historySummary = computed<LabelValue<string, any>[]>(() => {
+	const lastPoint = historyItems.value[historyItems.value.length - 1];
+	if (!lastPoint) {
+		return [];
+	}
+
+	if (historyMetric.value === "battery") {
+		return [
+			{ label: "容量", value: Text.unit(lastPoint.batteryCapacity, '%') },
+			{ label: "剩余时间", value: Text.unit(lastPoint.batteryRemainTime, '分钟') }
+		];
+	}
+	if (historyMetric.value === "load") {
+		return [
+			{ label: "负载", value: Text.unit(lastPoint.outputLoadPercent, '%') },
+			{ label: "输出状态", value: Text.displayBool(lastPoint.outputOn, '开启', '关闭') }
+		];
+	}
+	if (historyMetric.value === "voltage") {
+		return [
+			{ label: "输入电压", value: Text.unit(lastPoint.inputVoltage, 'V') },
+			{ label: "输出电压", value: Text.unit(lastPoint.outputVoltage, 'V') }
+		];
+	}
+	return [
+		{ label: "温度", value: Text.unit(lastPoint.temperature, '℃') },
+		{ label: "工作模式", value: Text.display(lastPoint.workMode) }
+	];
+});
+
+const isHistorySliderTouched = ref(false);
+const historySliderValue = ref(0);
+const HISTORY_DEFAULT_VISIBLE_COUNT = 24;
+
+const historyVisibleCount = computed(() => {
+	if (historyItems.value.length < 1) {
+		return 1;
+	}
+	return Math.min(HISTORY_DEFAULT_VISIBLE_COUNT, historyItems.value.length);
+});
+const historySliderMaxStart = computed(() => {
+	return Math.max(historyItems.value.length - historyVisibleCount.value, 0);
+});
+const currentHistoryRange = computed(() => {
+	const length = historyItems.value.length;
+	if (length < 1) {
+		return { startValue: 0, endValue: 0 };
+	}
+
+	const startValue = Math.min(Math.max(Math.floor(historySliderValue.value), 0), historySliderMaxStart.value);
+	const endValue = Math.min(startValue + historyVisibleCount.value - 1, length - 1);
+	return { startValue, endValue };
+});
+const visibleHistoryItems = computed<UpsHistoryPointView[]>(() => {
+	if (!historyItems.value.length) {
+		return [];
+	}
+	return historyItems.value.slice(currentHistoryRange.value.startValue, currentHistoryRange.value.endValue + 1);
+});
+
+watch(() => historyItems.value.length, (length) => {
+	if (length < 1) {
+		historySliderValue.value = 0;
+		isHistorySliderTouched.value = false;
+		return;
+	}
+
+	if (!isHistorySliderTouched.value) {
+		historySliderValue.value = historySliderMaxStart.value;
+		return;
+	}
+
+	historySliderValue.value = Math.min(historySliderValue.value, historySliderMaxStart.value);
+});
+
+function handleHistorySliderChange(value: number): void {
+	historySliderValue.value = Math.min(Math.max(Math.floor(value), 0), historySliderMaxStart.value);
+	isHistorySliderTouched.value = true;
+}
+
+// ---------- 图表 ----------
+
+const isDarkTheme = ref(false);
+let themeObserver: MutationObserver | null = null;
+
+const historyChartOption = computed((): EChartsOption => {
+	const axisColor = isDarkTheme.value ? "#9aa4b2" : "#7e8a9a";
+	const lineColor = isDarkTheme.value ? "rgba(255, 255, 255, .12)" : "rgba(18, 42, 66, .08)";
+	const legendColor = isDarkTheme.value ? "#d7dee8" : "#334155";
+
+	const commonOption: EChartsOption = {
+		tooltip: {
+			trigger: "axis",
+			confine: true,
+			position: (point, _params, _dom, _rect, size) => {
+				const gap = 6;
+				const fingerGap = 24;
+				const contentSize = size?.contentSize || [0, 0];
+				const viewSize = size?.viewSize || [0, 0];
+				const maxLeft = Math.max(viewSize[0] - contentSize[0] - gap, gap);
+				const maxTop = Math.max(viewSize[1] - contentSize[1] - gap, gap);
+				const clamp = (currentValue: number, min: number, max: number): number => {
+					return Math.min(Math.max(currentValue, min), max);
+				};
+				const preferLeft = point[0] - contentSize[0] - gap;
+				const preferRight = point[0] + gap;
+				const left = point[0] < viewSize[0] / 2
+					? clamp(preferRight, gap, maxLeft)
+					: clamp(preferLeft, gap, maxLeft);
+				const preferTop = point[1] - contentSize[1] - fingerGap;
+				const preferBottom = point[1] + fingerGap;
+				const top = preferTop >= gap
+					? clamp(preferTop, gap, maxTop)
+					: clamp(preferBottom, gap, maxTop);
+				return [left, top];
+			}
+		},
+		legend: {
+			top: 10,
+			textStyle: {
+				color: legendColor
+			}
+		},
+		grid: {
+			top: 40,
+			left: 8,
+			right: 8,
+			bottom: 8,
+			containLabel: true
+		},
+		xAxis: {
+			type: "category",
+			boundaryGap: false,
+			data: visibleHistoryItems.value.map((item) => item.at),
+			axisLabel: {
+				color: axisColor,
+				formatter: val => Time.toShortTime(Number(val))
+			},
+			axisLine: {
+				lineStyle: {
+					color: lineColor
+				}
+			}
+		}
+	};
+
+	if (!historyItems.value.length) {
+		return commonOption;
+	}
+
+	if (historyMetric.value === "battery") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: (params) => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`;
+					const lines = list.map((item) => {
+						const seriesName = item.seriesName || "";
+						if (seriesName === "容量") {
+							return `${item.marker}${seriesName}: ${Text.unit(Number(item.value), " %")}`;
+						}
+						return `${item.marker}${seriesName}: ${Text.unit(Number(item.value), '分钟')}`;
+					});
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: [
+				{
+					type: "value",
+					min: 0,
+					max: 100,
+					axisLabel: {
+						color: axisColor,
+						formatter: "{value} %"
+					},
+					splitLine: {
+						lineStyle: {
+							color: lineColor
+						}
+					}
+				},
+				{
+					type: "value",
+					axisLabel: {
+						color: axisColor,
+						formatter: "{value} min"
+					},
+					splitLine: {
+						show: false
+					}
+				}
+			],
+			series: [
+				resolveLineSeries("容量", visibleHistoryItems.value.map((item) => item.batteryCapacity!)),
+				resolveLineSeries("剩余时间", visibleHistoryItems.value.map((item) => item.batteryRemainTime || 0), 1)
+			]
+		};
+	}
+
+	if (historyMetric.value === "load") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: (params) => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`;
+					const lines = list.map((item) => `${item.marker}${item.seriesName}: ${Text.unit(Number(item.value), " %")}`);
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: {
+				type: "value",
+				min: 0,
+				max: 100,
+				axisLabel: {
+					color: axisColor,
+					formatter: "{value} %"
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("负载", visibleHistoryItems.value.map((item) => item.outputLoadPercent))
+			]
+		};
+	}
+
+	if (historyMetric.value === "voltage") {
+		return {
+			...commonOption,
+			tooltip: {
+				...commonOption.tooltip,
+				formatter: (params) => {
+					const list = Array.isArray(params) ? params : [params];
+					const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`;
+					const lines = list.map((item) => `${item.marker}${item.seriesName}: ${Text.unit(Number(item.value), " V")}`);
+					return [title, ...lines].join("<br />");
+				}
+			},
+			yAxis: {
+				type: "value",
+				axisLabel: {
+					color: axisColor,
+					formatter: "{value} V"
+				},
+				splitLine: {
+					lineStyle: {
+						color: lineColor
+					}
+				}
+			},
+			series: [
+				resolveLineSeries("输入电压", visibleHistoryItems.value.map((item) => item.inputVoltage || 0)),
+				resolveLineSeries("输出电压", visibleHistoryItems.value.map((item) => item.outputVoltage || 0))
+			]
+		};
+	}
+
+	return {
+		...commonOption,
+		tooltip: {
+			...commonOption.tooltip,
+			formatter: (params) => {
+				const list = Array.isArray(params) ? params : [params];
+				const title = `时间：${Time.toDateTime(Number(list[0]?.name))}`;
+				const lines = list.map((item) => `${item.marker}${item.seriesName}: ${Text.unit(Number(item.value), " ℃")}`);
+				return [title, ...lines].join("<br />");
+			}
+		},
+		yAxis: {
+			type: "value",
+			axisLabel: {
+				color: axisColor,
+				formatter: "{value} ℃"
+			},
+			splitLine: {
+				lineStyle: {
+					color: lineColor
+				}
+			}
+		},
+		series: [
+			resolveLineSeries("温度", visibleHistoryItems.value.map((item) => item.temperature || 0))
+		]
+	};
+});
+
+function resolveLineSeries(name: string, data: Array<number | null>, yAxisIndex?: number): SeriesOption {
+	const series: SeriesOption = {
+		type: "line",
+		name,
+		showSymbol: false,
+		smooth: true,
+		lineStyle: {
+			width: 2
+		},
+		areaStyle: {
+			opacity: .18
+		},
+		data
+	};
+
+	if (typeof yAxisIndex === "number") {
+		series.yAxisIndex = yAxisIndex;
+	}
+
+	return series;
+}
+
+// ---------- 加载与自动刷新 ----------
+
+let statusTimer: number | null = null;
+let historyTimer: number | null = null;
+
+watch(() => settingStore.dashboard.server, restartAutoRefresh, { deep: true });
+
+onMounted(() => {
+	updateThemeState();
+	restartAutoRefresh();
+	themeObserver = new MutationObserver(() => {
+		updateThemeState();
+	});
+	themeObserver.observe(document.documentElement, {
+		attributes: true,
+		attributeFilter: ["class"]
+	});
+});
+
+onUnmounted(() => {
+	clearAutoRefreshTimer();
+	if (themeObserver) {
+		themeObserver.disconnect();
+		themeObserver = null;
+	}
+});
+
+function updateThemeState(): void {
+	isDarkTheme.value = document.documentElement.classList.contains("theme-dark");
+}
+
+async function refreshStatus(): Promise<void> {
+	if (isStatusLoading.value) {
+		return;
+	}
+	isStatusLoading.value = true;
+	try {
+		statusView.value = await UpsAPI.getStatus();
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isStatusLoading.value = false;
+	}
+}
+
+async function refreshHistory(): Promise<void> {
+	if (isHistoryLoading.value) {
+		return;
+	}
+	isHistoryLoading.value = true;
+	try {
+		const historyView = await UpsAPI.getStatusHistory({
+			window: "24h"
+		});
+		historyPoints.value = historyView.points || [];
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: error instanceof Error ? error.message : "请求失败，请稍后重试"
+		});
+	} finally {
+		isHistoryLoading.value = false;
+	}
+}
+
+async function refreshDashboard(): Promise<void> {
+	await Promise.all([
+		refreshStatus(),
+		refreshHistory()
+	]);
+}
+
+function restartAutoRefresh(): void {
+	void refreshDashboard();
+	clearAutoRefreshTimer();
+
+	const snapshotIntervalMs = Math.max(settingStore.dashboard.server.snapshotRefreshSeconds, 1) * 1000;
+	const historyIntervalMs = Math.max(settingStore.dashboard.server.historyRefreshSeconds, 1) * 1000;
+
+	statusTimer = window.setInterval(() => {
+		void refreshStatus();
+	}, snapshotIntervalMs);
+
+	historyTimer = window.setInterval(() => {
+		void refreshHistory();
+	}, historyIntervalMs);
+}
+
+function clearAutoRefreshTimer(): void {
+	if (statusTimer !== null) {
+		window.clearInterval(statusTimer);
+		statusTimer = null;
+	}
+	if (historyTimer !== null) {
+		window.clearInterval(historyTimer);
+		historyTimer = null;
+	}
+}
+</script>
+
+<style scoped lang="less">
+.ups-dashboard {
+	gap: 1rem;
+	display: flex;
+	flex-direction: column;
+
+	.section {
+
+		&.history {
+			.metric-tabs {
+				width: 100%;
+				--td-tab-track-width: 4rem;
+			}
+
+			.chart {
+				width: 100%;
+				height: 16rem;
+				background: #FFF;
+			}
+
+			.slider {
+				gap: .5rem;
+				display: flex;
+				padding: .5rem 2rem;
+				align-items: center;
+
+				.label {
+					flex: none;
+					font-size: .75rem;
+					color: var(--app-sub);
+				}
+
+				.control {
+					flex: 1;
+				}
+			}
+		}
+	}
+
+	.loading-wrap {
+		display: flex;
+		min-height: 4rem;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
--- a/src/pages/file/FileExplorerGrid.vue
+++ b/src/pages/file/FileExplorerGrid.vue
@@ -0,0 +1,183 @@
+<template>
+	<recycle-scroller
+		class="scroller"
+		:items="rows"
+		:item-size="158"
+		key-field="key"
+	>
+		<template #before>
+			<div aria-hidden="true" class="spacer header"></div>
+		</template>
+		<template #default="{ item }">
+			<div class="grid-row">
+				<article
+					v-for="entry in item.items"
+					:key="entry.path"
+					:class="['card glass-white', { loading: entry.path === pendingPath }]"
+					@click="handleOpen(entry)"
+				>
+					<div :class="['icon', entry.type]">
+						<t-icon :name="entry.type === 'dir' ? 'folder' : entry.icon" />
+					</div>
+					<div class="meta">
+						<p class="name" v-text="entry.name"></p>
+						<div class="desc">
+							<t-loading v-if="entry.path === pendingPath" size="1rem" />
+							<p v-else class="desc-text" v-text="formatItemDesc(entry)"></p>
+						</div>
+					</div>
+				</article>
+				<div v-if="item.items.length < columns" class="card ghost"></div>
+			</div>
+		</template>
+		<template #after>
+			<div aria-hidden="true" class="spacer content"></div>
+		</template>
+	</recycle-scroller>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { RecycleScroller } from "vue-virtual-scroller";
+import { formatItemDesc, type ExplorerItem } from "./fileExplorer.shared";
+
+interface GridRow {
+	key: string;
+	items: ExplorerItem[];
+}
+
+const columns = 2;
+
+const props = defineProps<{
+	items: ExplorerItem[];
+	pendingPath?: string;
+}>();
+
+const emit = defineEmits<{
+	open: [item: ExplorerItem];
+}>();
+
+const rows = computed<GridRow[]>(() => {
+	const nextRows: GridRow[] = [];
+
+	for (let index = 0; index < props.items.length; index += columns) {
+		const chunk = props.items.slice(index, index + columns);
+		nextRows.push({
+			key: chunk.map((item) => item.path).join("|"),
+			items: chunk
+		});
+	}
+
+	return nextRows;
+});
+
+function handleOpen(item: ExplorerItem): void {
+	if (props.pendingPath) {
+		return;
+	}
+
+	emit("open", item);
+}
+</script>
+
+<style scoped lang="less">
+.scroller {
+	--top-gap: var(--page-top-gap, 1rem);
+	--bottom-gap: 5.5rem;
+
+	width: 100%;
+	height: 100%;
+	min-height: 0;
+}
+
+.spacer {
+	width: 100%;
+	pointer-events: none;
+
+	&.header {
+		height: var(--top-gap);
+	}
+
+	&.content {
+		height: var(--bottom-gap);
+	}
+}
+
+.grid-row {
+	gap: .75rem;
+	display: grid;
+	padding-bottom: .75rem;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.card {
+	gap: .75rem;
+	display: flex;
+	padding: 1rem .875rem;
+	border: 1px solid var(--app-line);
+	border-radius: 1rem;
+	flex-direction: column;
+	background: var(--app-card);
+	box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
+	cursor: pointer;
+
+	&.loading {
+		opacity: .72;
+	}
+
+	&.ghost {
+		visibility: hidden;
+		pointer-events: none;
+	}
+}
+
+.icon {
+	width: 2.75rem;
+	height: 2.75rem;
+	display: flex;
+	border-radius: .9rem;
+	align-items: center;
+	justify-content: center;
+	color: #fff;
+	background: linear-gradient(135deg, #4d8dff, #76a9ff);
+
+	&.dir {
+		background: linear-gradient(135deg, #ff9c3d, #ffbf69);
+	}
+}
+
+.meta {
+	gap: .3rem;
+	min-width: 0;
+	display: flex;
+	flex-direction: column;
+}
+
+.name,
+.desc-text {
+	margin: 0;
+	word-break: break-all;
+}
+
+.name {
+	color: var(--app-text);
+	font-size: 1rem;
+}
+
+.desc {
+	min-height: 1rem;
+	display: flex;
+	align-items: center;
+}
+
+.desc-text {
+	color: var(--app-sub);
+	font-size: .8125rem;
+}
+
+:global(.theme-dark) {
+	.card {
+		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .22);
+	}
+}
+</style>
--- a/src/pages/file/FileExplorerList.vue
+++ b/src/pages/file/FileExplorerList.vue
@@ -0,0 +1,217 @@
+<template>
+	<recycle-scroller
+		class="file-explorer-list"
+		:items="items"
+		:item-size="44"
+		key-field="path"
+	>
+		<template #before>
+			<div aria-hidden="true" class="spacer header"></div>
+		</template>
+		<template #default="{ item }">
+			<t-swipe-cell :disabled="!isSwipeActionVisible(item)" :left="resolveLeftActions(item)">
+				<t-cell
+					class="cell"
+					:title="item.name"
+					:arrow="item.type === 'dir'"
+					@click="handleOpen(item)"
+				>
+					<template #note>
+						<div class="health">
+							<t-loading v-if="item.path === pendingPath" size="1rem" />
+							<span v-if="item.type === 'file'" v-text="item.size"></span>
+						</div>
+					</template>
+					<template #left-icon>
+						<t-icon :name="item.type === 'dir' ? 'folder' : item.icon" />
+					</template>
+				</t-cell>
+			</t-swipe-cell>
+		</template>
+		<template #after>
+			<div aria-hidden="true" class="spacer content"></div>
+		</template>
+	</recycle-scroller>
+</template>
+
+<script setup lang="ts">
+import { h, resolveComponent } from "vue";
+import { RecycleScroller } from "vue-virtual-scroller";
+import { type ExplorerItem } from "./fileExplorer.shared";
+import { isBrowserSupportedAudio } from "./fileAudio.shared";
+
+const props = defineProps<{
+	items: ExplorerItem[];
+	pendingPath?: string;
+}>();
+
+const emit = defineEmits(["open", "queue", "play"]);
+
+function isSwipeActionVisible(item: ExplorerItem): boolean {
+	return isBrowserSupportedAudio(item);
+}
+
+function resolveLeftActions(item: ExplorerItem) {
+	if (!isSwipeActionVisible(item)) {
+		return undefined;
+	}
+
+	const buttonComponent = resolveComponent("t-button");
+	const iconComponent = resolveComponent("t-icon");
+
+	return () => h("div", { class: "actions" }, [
+		h(buttonComponent, {
+			class: "action-btn queue-action",
+			size: "small",
+			shape: "square",
+			theme: "primary",
+			variant: "outline",
+			onClick: () => handleQueue(item)
+		}, {
+			icon: () => h(iconComponent, { name: "queue" })
+		}),
+		h(buttonComponent, {
+			class: "action-btn play-action",
+			size: "small",
+			shape: "square",
+			theme: "primary",
+			onClick: () => handlePlay(item)
+		}, {
+			icon: () => h(iconComponent, { name: "play" })
+		})
+	]);
+}
+
+function handleOpen(item: ExplorerItem): void {
+	if (props.pendingPath) {
+		return;
+	}
+
+	emit("open", item);
+}
+
+function handleQueue(item: ExplorerItem): void {
+	if (props.pendingPath) {
+		return;
+	}
+
+	emit("queue", item);
+}
+
+function handlePlay(item: ExplorerItem): void {
+	console.log("play", item);
+	if (props.pendingPath) {
+		return;
+	}
+	emit("play", item);
+}
+</script>
+
+<style scoped lang="less">
+.file-explorer-list {
+	--top-gap: var(--page-top-gap, 1rem);
+	--bottom-gap: 5.5rem;
+
+	flex: 1 1 auto;
+	height: 100%;
+	padding: 0 1rem;
+	display: flex;
+	overflow: hidden;
+	min-height: 0;
+	flex-direction: column;
+
+	&:deep(.vue-recycle-scroller__item-view) {
+
+		&:first-child {
+
+			.cell {
+				border-radius: var(--td-radius-large) var(--td-radius-large) 0 0;
+			}
+		}
+
+		&:last-child {
+
+			.cell {
+				border-radius: 0 0 var(--td-radius-large) var(--td-radius-large);
+
+				&:after {
+					border-bottom: 0;
+				}
+			}
+		}
+	}
+
+	.spacer {
+		width: 100%;
+		pointer-events: none;
+
+		&.header {
+			height: var(--top-gap);
+		}
+
+		&.content {
+			height: var(--bottom-gap);
+		}
+	}
+
+	.health {
+		gap: .375rem;
+		display: flex;
+		flex: 0 0 auto;
+		min-height: 1rem;
+		align-items: center;
+		white-space: nowrap;
+		color: var(--app-sub);
+	}
+
+	&:deep(.actions) {
+		gap: .5rem;
+		height: 100%;
+		display: flex;
+		padding: 0 .75rem;
+		align-items: center;
+	}
+
+	&:deep(.queue-action) {
+		background: rgba(255, 255, 255, .92);
+	}
+
+	&:deep(.play-action) {
+		background: var(--td-brand-color);
+	}
+
+	&:deep(.action-btn) {
+		width: 2.25rem;
+		height: 2.25rem;
+		border-radius: .75rem;
+	}
+
+	.cell {
+
+		&:deep(.t-cell__content) {
+			flex: 1 1 auto;
+			overflow: hidden;
+			min-width: 0;
+		}
+
+		&:deep(.t-cell__title) {
+			flex: 1 1 auto;
+			overflow: hidden;
+			min-width: 0;
+		}
+
+		&:deep(.t-cell__title-text) {
+			width: 100%;
+			display: block;
+			overflow: hidden;
+			white-space: nowrap;
+			text-overflow: ellipsis;
+		}
+
+		&:deep(.t-cell__note) {
+			flex: 0 0 auto;
+			white-space: nowrap;
+		}
+	}
+}
+</style>
--- a/src/pages/file/FileExplorerPage.vue
+++ b/src/pages/file/FileExplorerPage.vue
@@ -0,0 +1,402 @@
+<template>
+	<div class="page">
+		<section v-if="currentItems.length" class="content">
+			<file-explorer-list
+				v-if="displayMode === 'list'"
+				:items="currentItems"
+				:pending-path="pendingFolderPath"
+				@open="openItem"
+				@queue="queueItem"
+				@play="playItem"
+			/>
+			<file-explorer-grid
+				v-else
+				:items="currentItems"
+				:pending-path="pendingFolderPath"
+				@open="openItem"
+			/>
+		</section>
+		<div v-else-if="pageLoading" class="loading-wrap">
+				<t-loading text="Loading directory" />
+		</div>
+			<t-empty v-else description="Directory is empty" />
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import FileAPI from "@/api/FileAPI";
+import FileExplorerGrid from "./FileExplorerGrid.vue";
+import FileExplorerList from "./FileExplorerList.vue";
+import { useNavBarStore } from "@/store/navBarStore";
+import {
+	type DisplayMode,
+	type ExplorerItem,
+	mapServerFileToExplorerItem,
+	sortExplorerItems
+} from "./fileExplorer.shared";
+
+const props = withDefaults(defineProps<{
+	mode?: DisplayMode;
+	path?: string | string[];
+	useRoutePath?: boolean;
+}>(), {
+	mode: "list",
+	path: "",
+	useRoutePath: true
+});
+
+const emit = defineEmits([
+	"update:path",
+	"open-folder",
+	"open-file",
+	"queue-file",
+	"play-file",
+	"update:mode"
+]);
+
+const route = useRoute();
+const router = useRouter();
+const navBarStore = useNavBarStore();
+const navBarRightOwner = `file-explorer-page-${Math.random().toString(36).slice(2)}`;
+
+const displayMode = ref<DisplayMode>(props.mode);
+const localSegments = ref<string[]>(normalizePath(props.path));
+const directoryCache = ref<Record<string, ExplorerItem[]>>({});
+const pageLoading = ref(false);
+const pendingFolderPath = ref("");
+let latestLoadToken = 0;
+
+const shouldUseRoutePath = computed(() => {
+	if (!props.useRoutePath) {
+		return false;
+	}
+
+	return route.name === "FileTab" || route.name === "FileExplorerPage";
+});
+
+const routeSegments = computed(() => normalizePath(route.params.pathMatch));
+const currentSegments = computed(() => {
+	if (shouldUseRoutePath.value) {
+		return routeSegments.value;
+	}
+
+	return localSegments.value;
+});
+
+const currentItems = computed<ExplorerItem[]>(() => {
+	return directoryCache.value[getDirectoryKey(currentSegments.value)] || [];
+});
+
+const currentTitle = computed(() => {
+	if (!currentSegments.value.length) {
+		return "文件";
+	}
+
+	return currentSegments.value[currentSegments.value.length - 1];
+});
+
+const displayModeActionText = computed(() => {
+	return displayMode.value === "list" ? "平铺" : "列表";
+});
+
+const navBarRightRenderer = defineComponent({
+	name: "file-explorer-nav-right",
+	setup() {
+		const buttonComponent = resolveComponent("t-button");
+		const iconComponent = resolveComponent("t-icon");
+
+		return () => h(buttonComponent, {
+			size: "small",
+			variant: "text",
+			theme: "primary",
+			class: "nav-switch",
+			shape: "square",
+			"aria-label": displayModeActionText.value,
+			onClick: toggleDisplayMode
+		}, {
+			icon: () => h(iconComponent, {
+				name: displayMode.value === "list" ? "grid-view" : "view-list",
+				size: "1.5rem"
+			})
+		});
+	}
+});
+
+watch(
+	() => props.mode,
+	(value) => {
+		displayMode.value = value;
+	},
+	{ immediate: true }
+);
+
+watch(
+	currentTitle,
+	(value) => {
+		navBarStore.setTitle(value);
+	},
+	{ immediate: true }
+);
+
+watch(
+	displayModeActionText,
+	() => {
+		navBarStore.setRightRenderer(navBarRightRenderer, navBarRightOwner);
+	},
+	{ immediate: true }
+);
+
+watch(
+	() => props.path,
+	(value) => {
+		if (shouldUseRoutePath.value) {
+			return;
+		}
+
+		localSegments.value = normalizePath(value);
+	},
+	{ immediate: true }
+);
+
+watch(
+	currentSegments,
+	(segments) => {
+		void hydrateCurrentDirectory(segments);
+	},
+	{ immediate: true }
+);
+
+function normalizePath(source?: string | string[]): string[] {
+	if (Array.isArray(source)) {
+		return source.filter((segment) => !!segment);
+	}
+
+	if (!source) {
+		return [];
+	}
+
+	return source.split("/").filter((segment) => !!segment);
+}
+
+function setDisplayMode(mode: DisplayMode): void {
+	if (displayMode.value === mode) {
+		return;
+	}
+
+	displayMode.value = mode;
+	emit("update:mode", mode);
+}
+
+function toggleDisplayMode(): void {
+	setDisplayMode(displayMode.value === "list" ? "grid" : "list");
+}
+
+onUnmounted(() => {
+	navBarStore.clearRight(navBarRightOwner);
+});
+
+async function openItem(item: ExplorerItem): Promise<void> {
+	if (pendingFolderPath.value) {
+		return;
+	}
+
+	if (item.type === "dir") {
+		const nextSegments = normalizePath(item.path);
+		pendingFolderPath.value = item.path;
+
+		try {
+			await ensureDirectoryLoaded(nextSegments, false);
+			emit("open-folder", nextSegments);
+			await syncPath(nextSegments);
+		} catch (error) {
+			Toast({
+				theme: "error",
+				message: "操作失败"
+			});
+		} finally {
+			pendingFolderPath.value = "";
+		}
+
+		return;
+	}
+
+	emit("open-file", item);
+}
+
+function queueItem(item: ExplorerItem): void {
+	emit("queue-file", item);
+}
+
+function playItem(item: ExplorerItem): void {
+	console.log("play-item", item);
+	emit("play-file", item);
+}
+
+async function syncPath(nextSegments: string[]): Promise<void> {
+	if (shouldUseRoutePath.value) {
+		if (!nextSegments.length) {
+			await router.push("/");
+			return;
+		}
+
+		await router.push({
+			name: "FileExplorerPage",
+			params: {
+				pathMatch: nextSegments
+			}
+		});
+		return;
+	}
+
+	localSegments.value = nextSegments;
+	emit("update:path", nextSegments);
+}
+
+async function hydrateCurrentDirectory(pathSegments: string[]): Promise<void> {
+	try {
+		await ensureDirectoryLoaded(pathSegments, true);
+	} catch (error) {
+		Toast({
+			theme: "error",
+			message: "操作失败"
+		});
+	}
+}
+
+async function ensureDirectoryLoaded(pathSegments: string[], updatePageLoading: boolean): Promise<ExplorerItem[]> {
+	const cacheKey = getDirectoryKey(pathSegments);
+	const cachedItems = directoryCache.value[cacheKey];
+
+	if (cachedItems) {
+		return cachedItems;
+	}
+
+	const requestToken = latestLoadToken + 1;
+	latestLoadToken = requestToken;
+
+	if (updatePageLoading) {
+		pageLoading.value = true;
+	}
+
+	try {
+		const files = await FileAPI.list(pathSegments);
+		const items = sortExplorerItems(files.map((item) => mapServerFileToExplorerItem(item)));
+		directoryCache.value = {
+			...directoryCache.value,
+			[cacheKey]: items
+		};
+		return items;
+	} finally {
+		if (updatePageLoading && requestToken === latestLoadToken) {
+			pageLoading.value = false;
+		}
+	}
+}
+
+function getDirectoryKey(pathSegments: string[]): string {
+	return pathSegments.join("/");
+}
+</script>
+
+<style scoped lang="less">
+.page {
+	--page-top-gap: calc(var(--app-nav-offset, 0px) + 1rem);
+
+	gap: 1rem;
+	height: 100%;
+	box-sizing: border-box;
+	display: flex;
+	overflow: hidden;
+	flex-direction: column;
+
+	.nav-switch {
+		padding: 0;
+		width: 2rem;
+		height: 2rem;
+	}
+
+	.go-up {
+		border: 1px solid var(--app-line);
+		background: var(--app-card);
+		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
+	}
+
+	.go-up {
+		gap: .875rem;
+		display: flex;
+		padding: .875rem 1rem;
+		border-radius: 1rem;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.content,
+	.loading-wrap {
+		min-height: 0;
+		flex: 1 1 auto;
+	}
+
+	.content {
+		display: flex;
+		overflow: hidden;
+
+		> * {
+			width: 100%;
+			flex: 1 1 auto;
+			min-height: 0;
+		}
+	}
+
+	.loading-wrap {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.icon {
+		width: 2.75rem;
+		height: 2.75rem;
+		display: flex;
+		border-radius: .9rem;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		background: linear-gradient(135deg, #4d8dff, #76a9ff);
+
+		&.dir {
+			background: linear-gradient(135deg, #ff9c3d, #ffbf69);
+		}
+	}
+
+	.meta {
+		gap: .3rem;
+		min-width: 0;
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+	}
+
+	.name,
+	.desc {
+		margin: 0;
+		word-break: break-all;
+	}
+
+	.name {
+		color: var(--app-text);
+		font-size: 1rem;
+	}
+
+	.desc {
+		color: var(--app-sub);
+		font-size: .8125rem;
+	}
+}
+
+:global(.theme-dark) .page {
+	.go-up {
+		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .22);
+	}
+}
+</style>
--- a/src/pages/file/fileAudio.shared.ts
+++ b/src/pages/file/fileAudio.shared.ts
@@ -0,0 +1,42 @@
+import type { ExplorerItem } from "./fileExplorer.shared";
+
+const audioMimeMap: Record<string, string[]> = {
+	mp3: ["audio/mpeg"],
+	mpeg: ["audio/mpeg"],
+	m4a: ["audio/mp4", "audio/x-m4a"],
+	mp4: ["audio/mp4"],
+	aac: ["audio/aac", "audio/mp4"],
+	ogg: ["audio/ogg", "audio/vorbis"],
+	oga: ["audio/ogg", "audio/vorbis"],
+	wav: ["audio/wav", "audio/wave", "audio/x-wav"],
+	webm: ["audio/webm"],
+	flac: ["audio/flac", "audio/x-flac"]
+};
+
+function resolveAudioExtension(item: ExplorerItem): string {
+	const rawExtension = item.extension || item.name.split(".").pop() || "";
+	return rawExtension.trim().toLowerCase();
+}
+
+export function isAudioExplorerItem(item: ExplorerItem): boolean {
+	return item.type === "file" && item.rawType === "AUDIO";
+}
+
+export function isBrowserSupportedAudio(item: ExplorerItem): boolean {
+	if (!isAudioExplorerItem(item)) {
+		return false;
+	}
+
+	const extension = resolveAudioExtension(item);
+	const mimeList = audioMimeMap[extension];
+	if (!mimeList?.length) {
+		return false;
+	}
+
+	if (typeof window === "undefined") {
+		return true;
+	}
+
+	const audio = document.createElement("audio");
+	return mimeList.some((mime) => !!audio.canPlayType(mime));
+}
--- a/src/pages/file/fileExplorer.shared.ts
+++ b/src/pages/file/fileExplorer.shared.ts
@@ -0,0 +1,123 @@
+import type { ServerFile } from "@/types/File";
+
+export type DisplayMode = "list" | "grid";
+export type FileItemType = "dir" | "file";
+
+export interface ExplorerItem {
+	name: string;
+	type: FileItemType;
+	extension?: string;
+	size?: string;
+	updatedAt: string;
+	icon: string;
+	path: string;
+	rawType?: string;
+}
+
+const fileIconMap: Record<string, string> = {
+	TXT: "file-text",
+	CODE: "code",
+	SCRIPT: "code",
+	ZIP: "file-zip",
+	MICROSOFT: "file-excel",
+	JAVA: "logo-android",
+	VIDEO: "video",
+	FONT: "font-size",
+	AUDIO: "music",
+	IMAGE: "image",
+	SYSTEM: "setting",
+	FILE: "file"
+};
+
+const dateTimeFormatter = new Intl.DateTimeFormat("zh-CN", {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit",
+	hour: "2-digit",
+	minute: "2-digit",
+	hour12: false
+});
+
+export function mapServerFileToExplorerItem(file: ServerFile): ExplorerItem {
+	const isDirectory = file.isDirectory || file.type === "DIRECTORY";
+	const rawPath = typeof file.absolutePath === "string" ? file.absolutePath.trim() : "";
+
+	return {
+		name: file.name || "未命名",
+		type: isDirectory ? "dir" : "file",
+		extension: file.extension,
+		size: isDirectory ? undefined : formatFileSize(file.size),
+		updatedAt: formatModifiedAt(file.modifiedAt),
+		icon: resolveFileIcon(file, isDirectory),
+		path: rawPath || file.name || "",
+		rawType: file.type
+	};
+}
+
+export function sortExplorerItems(items: ExplorerItem[]): ExplorerItem[] {
+	return [...items].sort((left, right) => {
+		if (left.type !== right.type) {
+			return left.type === "dir" ? -1 : 1;
+		}
+
+		return left.name.localeCompare(right.name, "zh-CN");
+	});
+}
+
+export function formatItemDesc(item: ExplorerItem): string {
+	if (item.type === "dir") {
+		return `文件夹 | ${item.updatedAt}`;
+	}
+
+	return `${item.size || "--"} | ${item.updatedAt}`;
+}
+
+function resolveFileIcon(file: ServerFile, isDirectory: boolean): string {
+	if (isDirectory) {
+		return "folder";
+	}
+
+	const rawType = typeof file.type === "string" ? file.type.toUpperCase() : "FILE";
+	return fileIconMap[rawType] || "file";
+}
+
+function formatModifiedAt(modifiedAt?: number): string {
+	if (!modifiedAt) {
+		return "未知时间";
+	}
+
+	return dateTimeFormatter.format(modifiedAt);
+}
+
+function formatFileSize(size?: number): string {
+	if (typeof size !== "number" || Number.isNaN(size) || size < 0) {
+		return "--";
+	}
+
+	if (size < 1024) {
+		return `${size} B`;
+	}
+
+	const units = ["KB", "MB", "GB", "TB"];
+	let nextSize = size / 1024;
+	let unitIndex = 0;
+
+	while (1024 <= nextSize && unitIndex < units.length - 1) {
+		nextSize /= 1024;
+		unitIndex += 1;
+	}
+
+	return `${trimDecimal(nextSize)} ${units[unitIndex]}`;
+}
+
+function trimDecimal(value: number): string {
+	if (10 <= value || Number.isInteger(value)) {
+		return value.toFixed(0);
+	}
+
+	if (1 <= value) {
+		return value.toFixed(1);
+	}
+
+	return value.toFixed(2);
+}
--- a/src/pages/setting/ConnectSetting.vue
+++ b/src/pages/setting/ConnectSetting.vue
@@ -0,0 +1,180 @@
+<template>
+	<div class="page">
+		<section class="card">
+			<div class="head">
+				<p class="tag">连接配置</p>
+				<h2 class="header">服务器连接</h2>
+				<p class="desc">这里的配置会持久化保存，缺失时应用会强制回到连接引导页。</p>
+			</div>
+
+			<div class="group">
+				<p class="label">协议</p>
+				<div class="protocols">
+					<t-button
+						size="small"
+						theme="primary"
+						:variant="form.protocol === 'http' ? 'base' : 'outline'"
+						@click="setProtocol('http')"
+					>
+						HTTP
+					</t-button>
+					<t-button
+						size="small"
+						theme="primary"
+						:variant="form.protocol === 'https' ? 'base' : 'outline'"
+						@click="setProtocol('https')"
+					>
+						HTTPS
+					</t-button>
+				</div>
+			</div>
+
+			<div class="group">
+				<p class="label">主机地址</p>
+				<t-input v-model="form.host" clearable placeholder="例如 192.168.1.100 或 nas.local" />
+			</div>
+
+			<div class="group">
+				<p class="label">端口</p>
+				<t-input v-model="form.port" clearable type="number" placeholder="例如 8080" />
+			</div>
+
+			<div class="group">
+				<p class="label">访问令牌</p>
+				<t-input v-model="form.token" clearable placeholder="请输入 token" />
+			</div>
+
+			<t-button block theme="primary" @click="saveConnect">
+				保存连接配置
+			</t-button>
+			<t-button block variant="outline" @click="resetConnect">
+				清空连接配置
+			</t-button>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import type { ConnectProtocol, ConnectSetting } from "@/store/settingStore";
+import { useSettingStore } from "@/store/settingStore";
+
+defineOptions({
+	name: "ConnectSetting"
+});
+
+const settingStore = useSettingStore();
+
+const form = reactive<ConnectSetting>({
+	protocol: "http",
+	host: "",
+	port: "",
+	token: ""
+});
+
+watch(
+	() => settingStore.connect,
+	(connect) => {
+		Object.assign(form, connect);
+	},
+	{ immediate: true }
+);
+
+function setProtocol(protocol: ConnectProtocol): void {
+	form.protocol = protocol;
+}
+
+function validateConnect(): boolean {
+	const host = form.host.trim();
+	const port = form.port.trim();
+	const token = form.token.trim();
+
+	if (!host || !port || !token) {
+		Toast({
+			theme: "warning",
+			message: "请完整填写连接配置"
+		});
+		return false;
+	}
+
+	return true;
+}
+
+function saveConnect(): void {
+	if (!validateConnect()) {
+		return;
+	}
+
+	settingStore.setConnect(form);
+	Toast({
+		theme: "success",
+		message: "连接配置已保存"
+	});
+}
+
+function resetConnect(): void {
+	settingStore.resetConnect();
+	Object.assign(form, settingStore.connect);
+	Toast({
+		theme: "success",
+		message: "连接配置已清空"
+	});
+}
+</script>
+
+<style scoped lang="less">
+.page {
+	padding: 1rem;
+
+	.card {
+		gap: 1rem;
+		display: flex;
+		padding: 1rem;
+		border-radius: 1rem;
+		flex-direction: column;
+		border: 1px solid var(--app-line);
+		background: var(--app-card);
+		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
+	}
+
+	.head,
+	.group {
+		gap: .5rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.tag,
+	.label,
+	.desc {
+		margin: 0;
+		color: var(--app-sub);
+	}
+
+	.tag,
+	.label {
+		font-size: .875rem;
+	}
+
+	.header {
+		margin: 0;
+		font-size: 1.25rem;
+	}
+
+	.desc {
+		line-height: 1.6;
+	}
+
+	.protocols {
+		gap: .75rem;
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+
+:global(.theme-dark) .page {
+	.card {
+		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
+	}
+}
+</style>
--- a/src/pages/setting/DashboardSetting.vue
+++ b/src/pages/setting/DashboardSetting.vue
@@ -0,0 +1,265 @@
+<template>
+	<div class="page">
+		<section class="card">
+			<div class="head">
+				<p class="tag">服务器</p>
+				<h2 class="header">数据刷新与采集</h2>
+				<p class="desc">用于配置服务器仪表板的请求频率和 metrics 参数。</p>
+			</div>
+
+			<div class="group">
+				<p class="label">当前状态刷新频率（秒）</p>
+				<t-input v-model="snapshotRefreshText" type="number" clearable placeholder="默认 3 秒" />
+			</div>
+
+			<div class="group">
+				<p class="label">历史采样刷新频率（秒）</p>
+				<t-input v-model="historyRefreshText" type="number" clearable placeholder="默认 10 秒" />
+			</div>
+
+			<div class="group">
+				<p class="label">当前状态采集指标</p>
+				<div class="metrics">
+					<t-button
+						v-for="metric in snapshotMetricOptions"
+						:key="metric.value"
+						size="small"
+						theme="primary"
+						:variant="isSnapshotMetricChecked(metric.value) ? 'base' : 'outline'"
+						@click="toggleSnapshotMetric(metric.value)"
+					>
+						<span v-text="metric.label" />
+					</t-button>
+				</div>
+			</div>
+
+			<div class="group">
+				<p class="label">历史采样采集指标</p>
+				<div class="metrics">
+					<t-button
+						v-for="metric in historyMetricOptions"
+						:key="metric.value"
+						size="small"
+						theme="primary"
+						:variant="isHistoryMetricChecked(metric.value) ? 'base' : 'outline'"
+						@click="toggleHistoryMetric(metric.value)"
+					>
+						<span v-text="metric.label" />
+					</t-button>
+				</div>
+			</div>
+
+			<t-button block theme="primary" @click="saveServerDashboardSetting">
+				保存服务器配置
+			</t-button>
+			<t-button block variant="outline" @click="resetServerDashboardSetting">
+				恢复默认
+			</t-button>
+		</section>
+
+		<section class="card">
+			<div class="head">
+				<p class="tag">Docker</p>
+				<h2 class="header">配置待定</h2>
+				<p class="desc">后续将支持 Docker 仪表板采集项和展示策略配置。</p>
+			</div>
+		</section>
+
+		<section class="card">
+			<div class="head">
+				<p class="tag">UPS</p>
+				<h2 class="header">配置待定</h2>
+				<p class="desc">后续将支持 UPS 仪表板采集项和告警策略配置。</p>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import {
+	useSettingStore,
+	type DashboardHistoryMetric,
+	type DashboardSnapshotMetric,
+	type ServerDashboardSetting
+} from "@/store/settingStore";
+
+defineOptions({
+	name: "DashboardSetting"
+});
+
+const settingStore = useSettingStore();
+
+const snapshotMetricOptions: Array<{ label: string; value: DashboardSnapshotMetric }> = [
+	{ label: "系统", value: "os" },
+	{ label: "CPU", value: "cpu" },
+	{ label: "内存", value: "memory" },
+	{ label: "JVM", value: "jvm" },
+	{ label: "网络", value: "network" },
+	{ label: "硬件", value: "hardware" },
+	{ label: "磁盘", value: "storage" }
+];
+
+const historyMetricOptions: Array<{ label: string; value: DashboardHistoryMetric }> = [
+	{ label: "CPU", value: "cpu" },
+	{ label: "内存", value: "memory" },
+	{ label: "JVM", value: "jvm" },
+	{ label: "网络", value: "network" }
+];
+
+const snapshotRefreshText = ref("");
+const historyRefreshText = ref("");
+const selectedSnapshotMetrics = ref<DashboardSnapshotMetric[]>([]);
+const selectedHistoryMetrics = ref<DashboardHistoryMetric[]>([]);
+
+watch(
+	() => settingStore.dashboard.server,
+	(setting) => {
+		snapshotRefreshText.value = String(setting.snapshotRefreshSeconds);
+		historyRefreshText.value = String(setting.historyRefreshSeconds);
+		selectedSnapshotMetrics.value = [...setting.snapshotMetrics];
+		selectedHistoryMetrics.value = [...setting.historyMetrics];
+	},
+	{ immediate: true }
+);
+
+function isSnapshotMetricChecked(metric: DashboardSnapshotMetric): boolean {
+	return selectedSnapshotMetrics.value.includes(metric);
+}
+
+function isHistoryMetricChecked(metric: DashboardHistoryMetric): boolean {
+	return selectedHistoryMetrics.value.includes(metric);
+}
+
+function toggleSnapshotMetric(metric: DashboardSnapshotMetric): void {
+	if (isSnapshotMetricChecked(metric)) {
+		if (selectedSnapshotMetrics.value.length <= 1) {
+			Toast({
+				theme: "warning",
+				message: "当前状态至少保留一个采集指标"
+			});
+			return;
+		}
+
+		selectedSnapshotMetrics.value = selectedSnapshotMetrics.value.filter((item) => item !== metric);
+		return;
+	}
+
+	selectedSnapshotMetrics.value = [...selectedSnapshotMetrics.value, metric];
+}
+
+function toggleHistoryMetric(metric: DashboardHistoryMetric): void {
+	if (isHistoryMetricChecked(metric)) {
+		if (selectedHistoryMetrics.value.length <= 1) {
+			Toast({
+				theme: "warning",
+				message: "历史采样至少保留一个采集指标"
+			});
+			return;
+		}
+
+		selectedHistoryMetrics.value = selectedHistoryMetrics.value.filter((item) => item !== metric);
+		return;
+	}
+
+	selectedHistoryMetrics.value = [...selectedHistoryMetrics.value, metric];
+}
+
+function saveServerDashboardSetting(): void {
+	const nextSetting: Partial<ServerDashboardSetting> = {
+		snapshotRefreshSeconds: normalizeSecondValue(snapshotRefreshText.value, 3),
+		historyRefreshSeconds: normalizeSecondValue(historyRefreshText.value, 10),
+		snapshotMetrics: selectedSnapshotMetrics.value,
+		historyMetrics: selectedHistoryMetrics.value
+	};
+
+	settingStore.setServerDashboard(nextSetting);
+	Toast({
+		theme: "success",
+		message: "服务器仪表板配置已保存"
+	});
+}
+
+function resetServerDashboardSetting(): void {
+	settingStore.setServerDashboard({
+		snapshotRefreshSeconds: 3,
+		historyRefreshSeconds: 10,
+		snapshotMetrics: ["os", "cpu", "memory", "jvm", "network", "hardware", "storage"],
+		historyMetrics: ["cpu", "memory", "jvm", "network"]
+	});
+
+	Toast({
+		theme: "success",
+		message: "已恢复默认配置"
+	});
+}
+
+function normalizeSecondValue(value: string, fallback: number): number {
+	const numberValue = Number(value);
+	if (Number.isNaN(numberValue)) {
+		return fallback;
+	}
+
+	return Math.min(Math.max(Math.floor(numberValue), 1), 120);
+}
+</script>
+
+<style scoped lang="less">
+.page {
+	gap: 1rem;
+	display: flex;
+	padding: 1rem;
+	flex-direction: column;
+
+	.card {
+		gap: 1rem;
+		display: flex;
+		padding: 1rem;
+		border-radius: 1rem;
+		flex-direction: column;
+		border: 1px solid var(--app-line);
+		background: var(--app-card);
+		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
+	}
+
+	.head,
+	.group {
+		gap: .5rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.tag,
+	.label,
+	.desc {
+		margin: 0;
+		color: var(--app-sub);
+	}
+
+	.tag,
+	.label {
+		font-size: .875rem;
+	}
+
+	.header {
+		margin: 0;
+		font-size: 1.25rem;
+	}
+
+	.desc {
+		line-height: 1.6;
+	}
+
+	.metrics {
+		gap: .75rem;
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+
+:global(.theme-dark) .page {
+	.card {
+		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
+	}
+}
+</style>
--- a/src/pages/setting/ThemeSetting.vue
+++ b/src/pages/setting/ThemeSetting.vue
@@ -0,0 +1,93 @@
+<template>
+	<div class="page">
+		<section class="card">
+			<div class="head">
+				<p class="tag">主题</p>
+				<h2 class="header">界面模式</h2>
+				<p class="desc">当前提供浅色、深色和跟随系统三种模式。</p>
+			</div>
+
+			<div class="modes">
+				<t-button
+					v-for="item in themeModeList"
+					:key="item.value"
+					theme="primary"
+					:variant="globalUIStore.themeMode === item.value ? 'base' : 'outline'"
+					@click="globalUIStore.setThemeMode(item.value)"
+				>
+					<span v-text="item.label" />
+				</t-button>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { useGlobalUIStore, type ThemeMode } from "@/store/globalUIStore";
+
+defineOptions({
+	name: "ThemeSetting"
+});
+
+const globalUIStore = useGlobalUIStore();
+
+const themeModeList: Array<{ label: string; value: ThemeMode }> = [
+	{ label: "浅色", value: "light" },
+	{ label: "深色", value: "dark" },
+	{ label: "跟随系统", value: "system" }
+];
+</script>
+
+<style scoped lang="less">
+.page {
+	padding: 1rem;
+
+	.card {
+		gap: 1rem;
+		display: flex;
+		padding: 1rem;
+		border-radius: 1rem;
+		flex-direction: column;
+		border: 1px solid var(--app-line);
+		background: var(--app-card);
+		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
+	}
+
+	.head {
+		gap: .5rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.tag,
+	.desc {
+		margin: 0;
+		color: var(--app-sub);
+	}
+
+	.tag {
+		font-size: .875rem;
+	}
+
+	.header {
+		margin: 0;
+		font-size: 1.25rem;
+	}
+
+	.desc {
+		line-height: 1.6;
+	}
+
+	.modes {
+		gap: .75rem;
+		display: flex;
+		flex-wrap: wrap;
+	}
+}
+
+:global(.theme-dark) .page {
+	.card {
+		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
+	}
+}
+</style>
--- a/src/pages/system/MusicPlayerPopup.vue
+++ b/src/pages/system/MusicPlayerPopup.vue
@@ -0,0 +1,278 @@
+<template>
+	<t-popup
+		:visible="musicPlayerStore.popupVisible"
+		placement="bottom"
+		teleport="body"
+		:duration="460"
+		@visible-change="handleVisibleChange"
+	>
+		<div class="music-popup">
+			<div class="summary">
+				<div class="cover">
+					<img v-if="currentSong.cover" :src="currentSong.cover" alt="封面">
+					<t-icon v-else name="music" />
+				</div>
+				<div class="info">
+					<p class="header" v-text="currentSong.title || currentFile?.name || '未选择歌曲'"></p>
+					<p class="artist" v-text="currentSong.artist || '未知艺术家'"></p>
+				</div>
+				<t-button class="close-btn" variant="text" shape="square" @click="closePopup">
+					关闭
+				</t-button>
+			</div>
+
+			<div class="toolbar">
+				<t-button variant="text" theme="danger" @click="clearQueue">
+					清空队列
+				</t-button>
+				<t-button variant="text" theme="primary" @click="musicPlayerStore.cyclePlayMode()">
+					<span v-text="musicPlayerStore.playModeLabel"></span>
+				</t-button>
+			</div>
+
+			<div class="queue">
+				<div class="queue-head">
+					<p class="queue-title">播放队列</p>
+					<p class="queue-count" v-text="`共 ${musicPlayerStore.queue.length} 首`"></p>
+				</div>
+				<div class="queue-list">
+					<button
+						v-for="(item, index) in musicPlayerStore.queue"
+						:key="item.id"
+						:class="{ active: index === musicPlayerStore.currentIndex }"
+						class="queue-item"
+						type="button"
+						@click="playItem(index)"
+					>
+						<div class="queue-main">
+							<p class="queue-name" v-text="item.song.title || item.file.name"></p>
+							<p class="queue-artist" v-text="item.song.artist || '未知艺术家'"></p>
+						</div>
+						<t-button
+							class="queue-remove"
+							variant="text"
+							shape="square"
+							@click.stop="musicPlayerStore.removeFromQueue(item.id)"
+						>
+							移除
+						</t-button>
+					</button>
+				</div>
+			</div>
+
+			<div class="controls">
+				<t-button variant="outline" @click="musicPlayerStore.playPrev">
+					上一首
+				</t-button>
+				<t-button theme="primary" @click="musicPlayerStore.togglePlaying">
+					<span v-text="musicPlayerStore.isPlaying ? '暂停' : '播放'"></span>
+				</t-button>
+				<t-button variant="outline" @click="musicPlayerStore.playNext">
+					下一首
+				</t-button>
+			</div>
+
+			<div class="volume">
+				<p class="volume-label">音量</p>
+				<t-slider v-model="volumePercent" :min="0" :max="100" />
+			</div>
+		</div>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+import { useMusicPlayerStore } from "@/store/musicPlayerStore";
+
+const musicPlayerStore = useMusicPlayerStore();
+
+const currentFile = computed(() => musicPlayerStore.currentFile);
+const currentSong = computed(() => musicPlayerStore.currentSong);
+const volumePercent = computed({
+	get() {
+		return Math.round(musicPlayerStore.volume * 100);
+	},
+	set(value: number) {
+		musicPlayerStore.setVolume(value / 100);
+	}
+});
+
+function handleVisibleChange(visible: boolean): void {
+	musicPlayerStore.setPopupVisible(visible);
+}
+
+function closePopup(): void {
+	musicPlayerStore.setPopupVisible(false);
+}
+
+function clearQueue(): void {
+	musicPlayerStore.clearQueue();
+}
+
+function playItem(index: number): void {
+	musicPlayerStore.setCurrentIndex(index);
+	musicPlayerStore.setPlaying(true);
+}
+</script>
+
+<style scoped lang="less">
+.music-popup {
+	gap: 1rem;
+	display: flex;
+	padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
+	border-radius: 1.25rem 1.25rem 0 0;
+	flex-direction: column;
+	background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 247, 250, .98));
+	box-shadow: 0 -.35rem 1.5rem rgba(17, 32, 56, .08);
+
+	.summary,
+	.toolbar,
+	.controls,
+	.volume {
+		gap: .75rem;
+		display: flex;
+		align-items: center;
+	}
+
+	.summary {
+		min-width: 0;
+	}
+
+	.cover {
+		flex: none;
+		width: 3.5rem;
+		height: 3.5rem;
+		display: flex;
+		overflow: hidden;
+		border-radius: 1rem;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		background: linear-gradient(135deg, #1f6fff, #51a2ff);
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+	}
+
+	.info {
+		gap: .35rem;
+		min-width: 0;
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+	}
+
+	.header,
+	.artist,
+	.queue-title,
+	.queue-count,
+	.queue-name,
+	.queue-artist,
+	.volume-label {
+		margin: 0;
+	}
+
+	.header,
+	.queue-name {
+		color: var(--app-text);
+		font-weight: 600;
+	}
+
+	.artist,
+	.queue-count,
+	.queue-artist,
+	.volume-label {
+		color: var(--app-sub);
+		font-size: .875rem;
+	}
+
+	.close-btn {
+		flex: none;
+	}
+
+	.toolbar,
+	.controls {
+		justify-content: space-between;
+	}
+
+	.queue {
+		gap: .75rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.queue-head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	.queue-list {
+		gap: .625rem;
+		display: flex;
+		overflow: auto;
+		max-height: 15rem;
+		flex-direction: column;
+	}
+
+	.queue-item {
+		gap: .75rem;
+		border: 0;
+		width: 100%;
+		display: flex;
+		padding: .875rem 1rem;
+		text-align: left;
+		border-radius: 1rem;
+		align-items: center;
+		background: rgba(255, 255, 255, .72);
+		justify-content: space-between;
+
+		&.active {
+			background: rgba(31, 111, 255, .12);
+		}
+	}
+
+	.queue-main {
+		gap: .25rem;
+		min-width: 0;
+		display: flex;
+		flex: 1 1 auto;
+		flex-direction: column;
+	}
+
+	.queue-name,
+	.queue-artist,
+	.header,
+	.artist {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.controls {
+		> * {
+			flex: 1 1 0;
+		}
+	}
+
+	.volume {
+		flex-direction: column;
+		align-items: stretch;
+	}
+}
+
+:global(.theme-dark) .music-popup {
+	background: linear-gradient(180deg, rgba(22, 26, 31, .98), rgba(14, 18, 23, .98));
+	box-shadow: 0 -.35rem 1.5rem rgba(0, 0, 0, .28);
+
+	.queue-item {
+		background: rgba(255, 255, 255, .05);
+
+		&.active {
+			background: rgba(81, 162, 255, .2);
+		}
+	}
+}
+</style>
--- a/src/pages/system/NotFoundPage.vue
+++ b/src/pages/system/NotFoundPage.vue
@@ -0,0 +1,6 @@
+<template>
+	<span>找不到页面</span>
+</template>
+
+<script setup lang="ts">
+</script>
--- a/src/pages/system/ServerIndexPage.vue
+++ b/src/pages/system/ServerIndexPage.vue
@@ -0,0 +1,202 @@
+<template>
+	<div class="server-index">
+		<section class="panel">
+			<div class="hero">
+				<p class="tag">NAS 连接</p>
+				<h1 class="header">先配置服务器连接</h1>
+				<p class="desc">缺少连接配置时，应用不会进入文件、状态和设置页面。</p>
+			</div>
+
+			<div class="form-card">
+				<div class="group">
+					<p class="label">协议</p>
+					<div class="protocols">
+						<t-button
+							size="small"
+							theme="primary"
+							:variant="form.protocol === 'http' ? 'base' : 'outline'"
+							@click="setProtocol('http')"
+						>
+							HTTP
+						</t-button>
+						<t-button
+							size="small"
+							theme="primary"
+							:variant="form.protocol === 'https' ? 'base' : 'outline'"
+							@click="setProtocol('https')"
+						>
+							HTTPS
+						</t-button>
+					</div>
+				</div>
+
+				<div class="group">
+					<p class="label">主机地址</p>
+					<t-input v-model="form.host" clearable placeholder="例如 192.168.1.100 或 nas.local" />
+				</div>
+
+				<div class="group">
+					<p class="label">端口</p>
+					<t-input v-model="form.port" clearable type="number" placeholder="例如 8080" />
+				</div>
+
+				<div class="group">
+					<p class="label">访问令牌</p>
+					<t-input v-model="form.token" clearable placeholder="请输入 token" />
+				</div>
+
+				<t-button block theme="primary" size="large" @click="submitConnect">
+					保存并进入
+				</t-button>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { Toast } from "tdesign-mobile-vue";
+import type { ConnectProtocol, ConnectSetting } from "@/store/settingStore";
+import { useSettingStore } from "@/store/settingStore";
+
+defineOptions({
+	name: "ServerIndexPage"
+});
+
+const route = useRoute();
+const router = useRouter();
+const settingStore = useSettingStore();
+
+const form = reactive<ConnectSetting>({
+	protocol: "http",
+	host: "",
+	port: "",
+	token: ""
+});
+
+watch(
+	() => settingStore.connect,
+	(connect) => {
+		Object.assign(form, connect);
+	},
+	{ immediate: true }
+);
+
+function setProtocol(protocol: ConnectProtocol): void {
+	form.protocol = protocol;
+}
+
+function validateConnect(): boolean {
+	const host = form.host.trim();
+	const port = form.port.trim();
+	const token = form.token.trim();
+
+	if (!host || !port || !token) {
+		Toast({
+			theme: "warning",
+			message: "请完整填写连接配置"
+		});
+		return false;
+	}
+
+	return true;
+}
+
+async function submitConnect(): Promise<void> {
+	if (!validateConnect()) {
+		return;
+	}
+
+	settingStore.setConnect(form);
+
+	const redirect = typeof route.query.redirect === "string" ? route.query.redirect : "/";
+	await router.replace(redirect);
+}
+</script>
+
+<style scoped lang="less">
+.server-index {
+	width: 100%;
+	min-height: 100vh;
+
+	.panel {
+		gap: 1.2rem;
+		display: flex;
+		padding: 1.2rem;
+		min-height: 100vh;
+		flex-direction: column;
+		background:
+			radial-gradient(circle at top right, rgba(0, 82, 217, .18), transparent 36%),
+			linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(245, 247, 250, .92));
+	}
+
+	.hero {
+		gap: .75rem;
+		display: flex;
+		padding-top: 3rem;
+		flex-direction: column;
+	}
+
+	.tag,
+	.label,
+	.desc {
+		margin: 0;
+		color: var(--app-sub);
+	}
+
+	.tag {
+		font-size: .875rem;
+		letter-spacing: .08em;
+	}
+
+	.header {
+		margin: 0;
+		font-size: 2rem;
+		line-height: 1.15;
+	}
+
+	.desc {
+		font-size: .95rem;
+		line-height: 1.7;
+	}
+
+	.form-card {
+		gap: 1rem;
+		display: flex;
+		padding: 1.2rem;
+		border-radius: 1.25rem;
+		flex-direction: column;
+		border: 1px solid var(--app-line);
+		background: rgba(255, 255, 255, .86);
+		box-shadow: 0 .75rem 2rem rgba(17, 32, 56, .08);
+		backdrop-filter: blur(14px);
+	}
+
+	.group {
+		gap: .5rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.label {
+		font-size: .875rem;
+	}
+
+	.protocols {
+		gap: .75rem;
+		display: flex;
+	}
+}
+
+:global(.theme-dark) .server-index {
+	.panel {
+		background:
+			radial-gradient(circle at top right, rgba(110, 168, 255, .2), transparent 34%),
+			linear-gradient(180deg, rgba(16, 20, 24, .96), rgba(12, 16, 20, .96));
+	}
+
+	.form-card {
+		background: rgba(26, 33, 41, .86);
+		box-shadow: 0 .75rem 2rem rgba(0, 0, 0, .28);
+	}
+}
+</style>
--- a/src/pages/tabs/DashboardTab.vue
+++ b/src/pages/tabs/DashboardTab.vue
@@ -0,0 +1,187 @@
+<template>
+	<div class="dashboard-tab">
+		<div ref="tabsWrapRef" class="tabs-wrap">
+			<t-tabs class="tabs" :value="activeTab" @change="onChangeTab">
+				<t-tab-panel value="server" label="服务器" />
+				<t-tab-panel value="docker" label="Docker" />
+				<t-tab-panel value="ups" label="UPS" />
+			</t-tabs>
+		</div>
+		<div class="content-wrap">
+			<transition :name="panelTransitionName" mode="out-in">
+				<component :is="activeComponent" :key="activeTab" class="dashboard-panel" />
+			</transition>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import type { Component } from "vue";
+import ServerDashboard from "@/pages/dashboard/ServerDashboard/ServerDashboard.vue";
+import DockerDashboard from "@/pages/dashboard/DockerDashboard/DockerDashboard.vue";
+import UPSDashboard from "@/pages/dashboard/UPSDashboard/UPSDashboard.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+// ---------- Tab ----------
+
+type DashboardTabValue = "server" | "docker" | "ups";
+type PanelTransitionName = "panel-slide-next" | "panel-slide-prev";
+
+const dashboardMap: Record<DashboardTabValue, Component> = {
+	server: ServerDashboard,
+	docker: DockerDashboard,
+	ups: UPSDashboard
+};
+const tabOrder: DashboardTabValue[] = ["server", "docker", "ups"];
+const activeComponent = computed(() => dashboardMap[activeTab.value]);
+const activeTab = ref<DashboardTabValue>("server");
+const panelTransitionName = ref<PanelTransitionName>("panel-slide-next");
+
+async function onChangeTab(value: string): Promise<void> {
+	const nextTab = value as DashboardTabValue;
+	if (nextTab === activeTab.value) {
+		return;
+	}
+
+	panelTransitionName.value = resolveTabDirection(nextTab);
+	activeTab.value = nextTab;
+	await syncRouteTab(nextTab);
+}
+
+// ---------- Tab 同步路由 ----------
+
+type DashboardTabQuery = {
+	tab?: string;
+};
+
+watch(() => route.query.tab, () => {
+	const nextTab = resolveRouteTab();
+	if (nextTab === activeTab.value) {
+		return;
+	}
+	panelTransitionName.value = resolveTabDirection(nextTab);
+	activeTab.value = nextTab;
+}, { immediate: true });
+
+function resolveRouteTab(): DashboardTabValue {
+	const queryTab = route.query.tab;
+	if (queryTab === "server" || queryTab === "docker" || queryTab === "ups") {
+		return queryTab;
+	}
+	return "server";
+}
+
+function resolveTabDirection(nextTab: DashboardTabValue): PanelTransitionName {
+	const currentIndex = tabOrder.indexOf(activeTab.value);
+	const nextIndex = tabOrder.indexOf(nextTab);
+	if (currentIndex <= -1 || nextIndex <= -1) {
+		return "panel-slide-next";
+	}
+	return currentIndex < nextIndex ? "panel-slide-next" : "panel-slide-prev";
+}
+
+async function syncRouteTab(nextTab: DashboardTabValue): Promise<void> {
+	if (route.query.tab === nextTab) {
+		return;
+	}
+
+	const nextQuery: DashboardTabQuery = {
+		...(route.query as DashboardTabQuery),
+		tab: nextTab
+	};
+	await router.replace({
+		query: nextQuery
+	});
+}
+
+onMounted(() => activeTab.value = resolveRouteTab());
+
+// ---------- Tab 高度 ----------
+
+const tabsWrapRef = ref<HTMLElement>();
+const tabsHeight = ref("0px");
+let tabsResizeObs: ResizeObserver | undefined;
+
+function updateTabsHeight(): void {
+	if (!tabsWrapRef.value) {
+		tabsHeight.value = "0px";
+		return;
+	}
+	tabsHeight.value = `${tabsWrapRef.value.offsetHeight}px`;
+}
+
+onMounted(() => {
+	updateTabsHeight();
+	if (!tabsWrapRef.value) {
+		return;
+	}
+	tabsResizeObs = new ResizeObserver(() => {
+		updateTabsHeight();
+	});
+	tabsResizeObs.observe(tabsWrapRef.value);
+});
+
+onUnmounted(() => {
+	if (tabsResizeObs) {
+		tabsResizeObs.disconnect();
+	}
+});
+</script>
+
+<style scoped lang="less">
+.dashboard-tab {
+	--dashboard-tabs-height: v-bind(tabsHeight);
+	display: flex;
+	flex-direction: column;
+
+	.tabs-wrap {
+		top: var(--app-nav-offset, 0px);
+		left: 0;
+		right: 0;
+		z-index: 1090;
+		position: fixed;
+		background: var(--app-bg, #fff);
+		border-bottom: 1px solid var(--app-line);
+
+		.tabs {
+			--td-tab-track-width: 4rem;
+
+			:deep(.t-tabs__nav) {
+				padding: 0 1rem;
+			}
+
+			:deep(.t-tabs__content) {
+				display: none;
+			}
+		}
+	}
+
+	.content-wrap {
+		flex: 1;
+		position: relative;
+		overflow: hidden;
+		padding-top: calc(var(--dashboard-tabs-height) + var(--app-nav-offset));
+	}
+
+	.panel-slide-next-enter-active,
+	.panel-slide-next-leave-active,
+	.panel-slide-prev-enter-active,
+	.panel-slide-prev-leave-active {
+		transition: opacity 260ms var(--tui-bezier), transform 260ms var(--tui-bezier);
+	}
+
+	.panel-slide-next-enter-from,
+	.panel-slide-prev-leave-to {
+		opacity: 0;
+		transform: translateX(50%);
+	}
+
+	.panel-slide-next-leave-to,
+	.panel-slide-prev-enter-from {
+		opacity: 0;
+		transform: translateX(-50%);
+	}
+}
+</style>
--- a/src/pages/tabs/FileTab.vue
+++ b/src/pages/tabs/FileTab.vue
@@ -0,0 +1,37 @@
+<template>
+	<file-explorer-page
+		@open-file="handleOpenFile"
+		@queue-file="handleQueueFile"
+		@play-file="handleOpenFile"
+	/>
+</template>
+
+<script setup lang="ts">
+import FileExplorerPage from "@/pages/file/FileExplorerPage.vue";
+import { isBrowserSupportedAudio } from "@/pages/file/fileAudio.shared";
+import type { ExplorerItem } from "@/pages/file/fileExplorer.shared";
+import { useMusicPlayerStore } from "@/store/musicPlayerStore";
+
+const musicPlayerStore = useMusicPlayerStore();
+
+function handleOpenFile(item: ExplorerItem): void {
+	console.log("handleOpenFile", item);
+	if (!isBrowserSupportedAudio(item)) {
+		return;
+	}
+
+	void musicPlayerStore.playFile(item, {
+		title: item.name
+	});
+}
+
+function handleQueueFile(item: ExplorerItem): void {
+	if (!isBrowserSupportedAudio(item)) {
+		return;
+	}
+
+	musicPlayerStore.enqueue(item, {
+		title: item.name
+	});
+}
+</script>
--- a/src/pages/tabs/SettingsTab.vue
+++ b/src/pages/tabs/SettingsTab.vue
@@ -0,0 +1,99 @@
+<template>
+	<div class="page">
+		<section class="card">
+			<div class="head">
+				<p class="tag">系统设置</p>
+				<h2 class="header">配置入口</h2>
+				<p class="desc">设置页只保留入口，具体配置在独立页面中维护。</p>
+			</div>
+			<div class="entries">
+				<t-button block variant="outline" @click="openConnectSetting">
+					连接配置
+				</t-button>
+				<t-button block variant="outline" @click="openDashboardSetting">
+					仪表板
+				</t-button>
+				<t-button block variant="outline" @click="openThemeSetting">
+					主题
+				</t-button>
+			</div>
+		</section>
+	</div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+	name: "SettingsTab"
+});
+
+const router = useRouter();
+
+function openConnectSetting(): void {
+	void router.push("/settings/connect");
+}
+
+function openDashboardSetting(): void {
+	void router.push("/settings/dashboard");
+}
+
+function openThemeSetting(): void {
+	void router.push("/settings/theme");
+}
+</script>
+
+<style scoped lang="less">
+.page {
+	gap: 1rem;
+	display: flex;
+	padding: 1rem;
+	flex-direction: column;
+
+	.card {
+		gap: 1rem;
+		display: flex;
+		padding: 1rem;
+		border-radius: 1rem;
+		flex-direction: column;
+		border: 1px solid var(--app-line);
+		background: var(--app-card);
+		box-shadow: 0 .35rem 1rem rgba(17, 32, 56, .05);
+	}
+
+	.head {
+		gap: .5rem;
+		display: flex;
+		flex-direction: column;
+	}
+
+	.tag,
+	.desc {
+		margin: 0;
+		color: var(--app-sub);
+	}
+
+	.tag {
+		font-size: .875rem;
+	}
+
+	.header {
+		margin: 0;
+		font-size: 1.25rem;
+	}
+
+	.desc {
+		line-height: 1.6;
+	}
+
+	.entries {
+		gap: .75rem;
+		display: flex;
+		flex-direction: column;
+	}
+}
+
+:global(.theme-dark) .page {
+	.card {
+		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
+	}
+}
+</style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -0,0 +1,205 @@
+import { createRouter, createWebHistory, type RouteLocationNormalized } from "vue-router";
+import RootLayout from "@/layout/RootLayout.vue";
+import MainLayout from "@/layout/MainLayout.vue";
+import tabs from "@/router/tabs";
+import { DEFAULT_BODY_BACKGROUND, useGlobalUIStore } from "@/store/globalUIStore";
+import { useSettingStore } from "@/store/settingStore";
+import NotFoundPage from "@/pages/system/NotFoundPage.vue";
+import ServerIndexPage from "@/pages/system/ServerIndexPage.vue";
+import FileTab from "@/pages/tabs/FileTab.vue";
+import ConnectSetting from "@/pages/setting/ConnectSetting.vue";
+import DashboardSetting from "@/pages/setting/DashboardSetting.vue";
+import ThemeSetting from "@/pages/setting/ThemeSetting.vue";
+import ServerDetail from "@/pages/dashboard/ServerDashboard/ServerDetail.vue";
+import ServerPerformanceDetail from "@/pages/dashboard/ServerDashboard/ServerPerformanceDetail.vue";
+import ServerPartitionsDetail from "@/pages/dashboard/ServerDashboard/ServerPartitionsDetail.vue";
+import DockerContainerDetail from "@/pages/dashboard/DockerDashboard/DockerContainerDetail.vue";
+
+const router = createRouter({
+	history: createWebHistory("/"),
+	scrollBehavior(_to, _from, savedPosition) {
+		if (savedPosition) {
+			return savedPosition;
+		}
+
+		return {
+			left: 0,
+			top: 0
+		};
+	},
+	routes: [
+		{
+			path: "/",
+			name: "RootLayout",
+			component: RootLayout,
+			children: [
+				{
+					path: "/server-index",
+					name: "ServerIndexPage",
+					component: ServerIndexPage,
+					meta: {
+						depth: 1,
+						ignoreConnectCheck: true,
+						navBarVisible: false,
+						tabBarVisible: false,
+						bodyBackground: "#FFF"
+					}
+				},
+				{
+					path: "/",
+					name: "MainLayout",
+					component: MainLayout,
+					meta: {
+						depth: 2,
+						bodyBackground: "#FFF"
+					},
+					children: [
+						...tabs,
+						{
+							path: "/files/:pathMatch(.*)+",
+							name: "FileExplorerPage",
+							meta: {
+								dynamicDepth: true,
+								baseDepth: 2,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "文件",
+								tabBarVisible: true,
+								tabBarPadding: false,
+								contentFixedHeight: true,
+								bodyBackground: "#F4F4F4"
+							},
+							component: FileTab
+						},
+						{
+							path: "/server/system-detail",
+							name: "ServerDetail",
+							meta: {
+								depth: 3,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "系统详情",
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
+							},
+							component: ServerDetail
+						},
+						{
+							path: "/server/performance-detail",
+							name: "ServerPerformanceDetail",
+							meta: {
+								depth: 3,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "资源详情",
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
+							},
+							component: ServerPerformanceDetail
+						},
+						{
+							path: "/server/partitions-detail",
+							name: "ServerPartitionsDetail",
+							meta: {
+								depth: 3,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "磁盘详情",
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
+							},
+							component: ServerPartitionsDetail
+						},
+						{
+							path: "/server/docker-container-detail",
+							name: "DockerContainerDetail",
+							meta: {
+								depth: 3,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "容器详情",
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
+							},
+							component: DockerContainerDetail
+						},
+						{
+							path: "/settings/connect",
+							name: "ConnectSetting",
+							meta: {
+								depth: 3,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "连接配置",
+								tabBarVisible: false
+							},
+							component: ConnectSetting
+						},
+						{
+							path: "/settings/dashboard",
+							name: "DashboardSetting",
+							meta: {
+								depth: 3,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "仪表板设置",
+								tabBarVisible: false
+							},
+							component: DashboardSetting
+						},
+						{
+							path: "/settings/theme",
+							name: "ThemeSetting",
+							meta: {
+								depth: 3,
+								navBarVisible: true,
+								navBarCanBack: true,
+								navBarTitle: "主题设置",
+								tabBarVisible: false
+							},
+							component: ThemeSetting
+						}
+					]
+				}
+			]
+		},
+		{
+			path: "/:pathMatch(.*)*",
+			name: "NotFoundPage",
+			meta: {
+				depth: 1,
+				ignoreConnectCheck: true,
+				navBarVisible: false,
+				tabBarVisible: false
+			},
+			component: NotFoundPage
+		}
+	]
+});
+
+router.beforeEach((to: RouteLocationNormalized) => {
+	const settingStore = useSettingStore();
+
+	if (to.meta.ignoreConnectCheck) {
+		return true;
+	}
+
+	if (settingStore.hasConnectConfig) {
+		return true;
+	}
+
+	return {
+		name: "ServerIndexPage",
+		query: {
+			redirect: to.fullPath
+		}
+	};
+});
+
+router.afterEach((to: RouteLocationNormalized) => {
+	const globalUIStore = useGlobalUIStore();
+	const targetBackground = typeof to.meta.bodyBackground === "string" ? to.meta.bodyBackground : DEFAULT_BODY_BACKGROUND;
+	globalUIStore.setBodyBackground(targetBackground);
+});
+
+export default router;
--- a/src/router/tabs.ts
+++ b/src/router/tabs.ts
@@ -0,0 +1,52 @@
+import type { RouteRecordRaw } from "vue-router";
+import FileTab from "@/pages/tabs/FileTab.vue";
+import DashboardTab from "@/pages/tabs/DashboardTab.vue";
+import SettingsTab from "@/pages/tabs/SettingsTab.vue";
+
+const tabs: RouteRecordRaw[] = [
+	{
+		path: "/",
+		name: "FileTab",
+		meta: {
+			depth: 2,
+			navBarVisible: true,
+			navBarTitle: "文件",
+			tabBarVisible: true,
+			tabBarRoot: true,
+			tabBarPadding: false,
+			contentFixedHeight: true,
+			bodyBackground: "#F4F4F4"
+		},
+		component: FileTab
+	},
+	{
+		path: "/server",
+		name: "DashboardTab",
+		meta: {
+			depth: 2,
+			navBarVisible: true,
+			navBarTitle: "状态",
+			tabBarVisible: true,
+			tabBarRoot: true,
+			tabBarPadding: true,
+			bodyBackground: "#F4F4F4"
+		},
+		component: DashboardTab
+	},
+	{
+		path: "/settings",
+		name: "SettingsTab",
+		meta: {
+			depth: 2,
+			navBarVisible: true,
+			navBarTitle: "设置",
+			tabBarVisible: true,
+			tabBarRoot: true,
+			tabBarPadding: true,
+			bodyBackground: "#FFF"
+		},
+		component: SettingsTab
+	}
+];
+
+export default tabs;
--- a/src/store/globalUIStore.ts
+++ b/src/store/globalUIStore.ts
@@ -0,0 +1,34 @@
+import { defineStore } from "pinia";
+
+export const DEFAULT_BODY_BACKGROUND = "var(--app-bg)";
+
+export type ThemeMode = "light" | "dark" | "system";
+
+export const useGlobalUIStore = defineStore("global-ui", () => {
+	const bodyBackground = ref<string>(DEFAULT_BODY_BACKGROUND);
+	const themeMode = ref<ThemeMode>("system");
+
+	const themeClass = computed(() => {
+		if (themeMode.value === "system") {
+			return window.matchMedia("(prefers-color-scheme: dark)").matches ? "theme-dark" : "theme-light";
+		}
+
+		return themeMode.value === "dark" ? "theme-dark" : "theme-light";
+	});
+
+	function setBodyBackground(color?: string): void {
+		bodyBackground.value = color || DEFAULT_BODY_BACKGROUND;
+	}
+
+	function setThemeMode(mode: ThemeMode): void {
+		themeMode.value = mode;
+	}
+
+	return {
+		bodyBackground,
+		themeMode,
+		themeClass,
+		setBodyBackground,
+		setThemeMode
+	};
+});
--- a/src/store/musicPlayerStore.ts
+++ b/src/store/musicPlayerStore.ts
@@ -0,0 +1,566 @@
+import { defineStore } from "pinia";
+import { parseBlob } from "music-metadata-browser";
+import { Toast } from "tdesign-mobile-vue";
+import { isBrowserSupportedAudio } from "@/pages/file/fileAudio.shared";
+import type { ExplorerItem } from "@/pages/file/fileExplorer.shared";
+import Storage from "@/utils/Storage";
+import FileAPI from "@/api/FileAPI.ts";
+
+const MUSIC_PLAYER_STORAGE_KEY = "timi-server.music-player";
+
+export type MusicPlayMode = "single-loop" | "queue-loop" | "order";
+
+export interface MusicSongInfo {
+	cover: string;
+	title: string;
+	artist: string;
+	album: string;
+	duration: number;
+}
+
+export interface MusicQueueItem {
+	id: string;
+	file: ExplorerItem;
+	song: MusicSongInfo;
+}
+
+interface MusicPlayerState {
+	playMode: MusicPlayMode;
+	queue: MusicQueueItem[];
+	currentIndex: number;
+	isPlaying: boolean;
+	volume: number;
+	popupVisible: boolean;
+}
+
+const defaultSongInfo = (): MusicSongInfo => ({
+	cover: "",
+	title: "",
+	artist: "未知艺术家",
+	album: "",
+	duration: 0
+});
+
+const defaultState = (): MusicPlayerState => ({
+	playMode: "queue-loop",
+	queue: [],
+	currentIndex: -1,
+	isPlaying: false,
+	volume: .8,
+	popupVisible: false
+});
+
+const metadataLoadedMap = new Set<string>();
+const coverURLMap = new Map<string, string>();
+let playerAudio: HTMLAudioElement | undefined;
+
+function normalizeSongInfo(song?: Partial<MusicSongInfo>, fallbackTitle = ""): MusicSongInfo {
+	return {
+		cover: song?.cover?.trim() || "",
+		title: song?.title?.trim() || fallbackTitle,
+		artist: song?.artist?.trim() || "未知艺术家",
+		album: song?.album?.trim() || "",
+		duration: typeof song?.duration === "number" && !Number.isNaN(song.duration) && 0 <= song.duration ? song.duration : 0
+	};
+}
+
+function normalizeVolume(volume?: number): number {
+	if (typeof volume !== "number" || Number.isNaN(volume)) {
+		return .8;
+	}
+
+	if (volume < 0) {
+		return 0;
+	}
+
+	if (1 < volume) {
+		return 1;
+	}
+
+	return volume;
+}
+
+function buildQueueId(file: ExplorerItem): string {
+	return file.path || file.name;
+}
+
+function normalizeState(source?: Partial<MusicPlayerState>): MusicPlayerState {
+	const queue = Array.isArray(source?.queue)
+		? source.queue
+			.filter((item) => !!item?.file)
+			.map((item) => ({
+				id: item.id || buildQueueId(item.file),
+				file: item.file,
+				song: normalizeSongInfo(item.song, item.file.name)
+			}))
+		: [];
+	const currentIndex = queue.length && typeof source?.currentIndex === "number"
+		? Math.min(Math.max(source.currentIndex, 0), queue.length - 1)
+		: queue.length ? 0 : -1;
+
+	return {
+		playMode: source?.playMode === "single-loop" || source?.playMode === "order" ? source.playMode : "queue-loop",
+		queue,
+		currentIndex,
+		isPlaying: !!queue.length && !!source?.isPlaying,
+		volume: normalizeVolume(source?.volume),
+		popupVisible: !!queue.length && !!source?.popupVisible
+	};
+}
+
+export const useMusicPlayerStore = defineStore("music-player", () => {
+	const state = ref<MusicPlayerState>(normalizeState(Storage.getDefault<MusicPlayerState>(MUSIC_PLAYER_STORAGE_KEY, defaultState())));
+
+	const playMode = computed(() => state.value.playMode);
+	const queue = computed(() => state.value.queue);
+	const isPlaying = computed(() => state.value.isPlaying);
+	const volume = computed(() => state.value.volume);
+	const popupVisible = computed(() => state.value.popupVisible);
+	const hasQueue = computed(() => 0 < state.value.queue.length);
+	const currentIndex = computed(() => state.value.currentIndex);
+	const currentQueueItem = computed(() => {
+		if (state.value.currentIndex < 0) {
+			return undefined;
+		}
+
+		return state.value.queue[state.value.currentIndex];
+	});
+	const currentFile = computed(() => currentQueueItem.value?.file);
+	const currentSong = computed(() => currentQueueItem.value?.song || defaultSongInfo());
+	const playModeLabel = computed(() => {
+		switch (state.value.playMode) {
+			case "single-loop":
+				return "单曲循环";
+			case "order":
+				return "顺序播放";
+			default:
+				return "队列循环";
+		}
+	});
+
+	function persist(): void {
+		Storage.setObject(MUSIC_PLAYER_STORAGE_KEY, state.value);
+	}
+
+	function ensureAudio(): HTMLAudioElement | undefined {
+		if (typeof window === "undefined") {
+			return undefined;
+		}
+
+		if (playerAudio) {
+			return playerAudio;
+		}
+
+		playerAudio = new Audio();
+		playerAudio.preload = "metadata";
+		playerAudio.volume = state.value.volume;
+		playerAudio.addEventListener("ended", () => {
+			handleTrackEnded();
+		});
+		playerAudio.addEventListener("loadedmetadata", () => {
+			const item = currentQueueItem.value;
+			if (!item || !playerAudio || !Number.isFinite(playerAudio.duration)) {
+				return;
+			}
+
+			item.song.duration = Math.max(playerAudio.duration, 0);
+			persist();
+		});
+		playerAudio.addEventListener("play", () => {
+			state.value.isPlaying = true;
+			persist();
+		});
+		playerAudio.addEventListener("pause", () => {
+			state.value.isPlaying = false;
+			persist();
+		});
+		playerAudio.addEventListener("volumechange", () => {
+			if (!playerAudio) {
+				return;
+			}
+
+			state.value.volume = normalizeVolume(playerAudio.volume);
+			persist();
+		});
+		playerAudio.addEventListener("error", () => {
+			state.value.isPlaying = false;
+			persist();
+			Toast({
+				theme: "error",
+				message: "音频播放失败"
+			});
+		});
+
+		return playerAudio;
+	}
+
+	function releaseCoverURL(id: string): void {
+		const coverURL = coverURLMap.get(id);
+		if (!coverURL) {
+			return;
+		}
+
+		URL.revokeObjectURL(coverURL);
+		coverURLMap.delete(id);
+	}
+
+	function syncAudioSource(): void {
+		const audio = ensureAudio();
+		const item = currentQueueItem.value;
+
+		if (!audio || !item) {
+			return;
+		}
+
+		const targetURL = FileAPI.buildURL(item.file.path, "download");
+		if (audio.src !== targetURL) {
+			audio.src = targetURL;
+			audio.load();
+		}
+
+		void hydrateSongInfo(item);
+	}
+
+	async function playCurrent(): Promise<void> {
+		const audio = ensureAudio();
+		if (!audio || !currentQueueItem.value) {
+			return;
+		}
+
+		syncAudioSource();
+
+		try {
+			await audio.play();
+			state.value.isPlaying = true;
+			persist();
+		} catch (error) {
+			state.value.isPlaying = false;
+			persist();
+			console.warn(error);
+		}
+	}
+
+	function pauseCurrent(): void {
+		const audio = ensureAudio();
+		if (!audio) {
+			return;
+		}
+
+		audio.pause();
+		state.value.isPlaying = false;
+		persist();
+	}
+
+	function handleTrackEnded(): void {
+		if (!state.value.queue.length) {
+			return;
+		}
+
+		if (state.value.playMode === "single-loop") {
+			const audio = ensureAudio();
+			if (audio) {
+				audio.currentTime = 0;
+			}
+			void playCurrent();
+			return;
+		}
+
+		playNext();
+	}
+
+	async function hydrateSongInfo(item: MusicQueueItem): Promise<void> {
+		if (metadataLoadedMap.has(item.id)) {
+			return;
+		}
+
+		metadataLoadedMap.add(item.id);
+
+		try {
+			const response = await fetch(FileAPI.buildURL(item.file.path, "download"));
+			if (!response.ok) {
+				return;
+			}
+
+			const blob = await response.blob();
+			const metadata = await parseBlob(blob);
+			const common = metadata.common;
+			const cover = common.picture?.[0];
+			let coverURL = item.song.cover;
+
+			if (cover?.data) {
+				releaseCoverURL(item.id);
+				coverURL = URL.createObjectURL(new Blob([cover.data], { type: cover.format || "image/jpeg" }));
+				coverURLMap.set(item.id, coverURL);
+			}
+
+			item.song = normalizeSongInfo({
+				cover: coverURL,
+				title: common.title || item.song.title || item.file.name,
+				artist: common.artist || item.song.artist,
+				album: common.album || item.song.album,
+				duration: metadata.format.duration || item.song.duration
+			}, item.file.name);
+			persist();
+		} catch (error) {
+			console.warn(error);
+		}
+	}
+
+	function upsertQueueItem(file: ExplorerItem, song?: Partial<MusicSongInfo>, activate = false): number {
+		const queueId = buildQueueId(file);
+		const targetIndex = state.value.queue.findIndex((item) => item.id === queueId);
+
+		if (targetIndex < 0) {
+			state.value.queue.push({
+				id: queueId,
+				file,
+				song: normalizeSongInfo(song, file.name)
+			});
+
+			if (activate || state.value.currentIndex < 0) {
+				state.value.currentIndex = state.value.queue.length - 1;
+			}
+
+			return state.value.queue.length - 1;
+		}
+
+		const currentItem = state.value.queue[targetIndex];
+		state.value.queue[targetIndex] = {
+			...currentItem,
+			file,
+			song: normalizeSongInfo(song || currentItem.song, file.name)
+		};
+
+		if (activate) {
+			state.value.currentIndex = targetIndex;
+		}
+
+		return targetIndex;
+	}
+
+	function setPlayMode(mode: MusicPlayMode): void {
+		state.value.playMode = mode;
+		persist();
+	}
+
+	function cyclePlayMode(): void {
+		if (state.value.playMode === "single-loop") {
+			state.value.playMode = "queue-loop";
+		} else if (state.value.playMode === "queue-loop") {
+			state.value.playMode = "order";
+		} else {
+			state.value.playMode = "single-loop";
+		}
+		persist();
+	}
+
+	function setVolume(nextVolume: number): void {
+		state.value.volume = normalizeVolume(nextVolume);
+		const audio = ensureAudio();
+		if (audio) {
+			audio.volume = state.value.volume;
+		}
+		persist();
+	}
+
+	function setPopupVisible(visible: boolean): void {
+		state.value.popupVisible = visible;
+		persist();
+	}
+
+	function setPlaying(playing: boolean): void {
+		if (playing) {
+			void playCurrent();
+			return;
+		}
+
+		pauseCurrent();
+	}
+
+	function togglePlaying(): void {
+		if (!state.value.queue.length) {
+			return;
+		}
+
+		if (state.value.isPlaying) {
+			pauseCurrent();
+		} else {
+			void playCurrent();
+		}
+	}
+
+	function setCurrentIndex(index: number): void {
+		if (index < 0 || state.value.queue.length <= index) {
+			return;
+		}
+
+		state.value.currentIndex = index;
+		syncAudioSource();
+		persist();
+	}
+
+	function setQueue(queueItems: MusicQueueItem[], nextIndex = 0): void {
+		state.value.queue = queueItems;
+		state.value.currentIndex = queueItems.length ? Math.min(Math.max(nextIndex, 0), queueItems.length - 1) : -1;
+		state.value.isPlaying = false;
+		syncAudioSource();
+		persist();
+	}
+
+	function addToQueue(file: ExplorerItem, song?: Partial<MusicSongInfo>): void {
+		enqueue(file, song);
+	}
+
+	function enqueue(file: ExplorerItem, song?: Partial<MusicSongInfo>): void {
+		if (!isBrowserSupportedAudio(file)) {
+			return;
+		}
+
+		upsertQueueItem(file, song, false);
+		persist();
+	}
+
+	async function playFile(file: ExplorerItem, song?: Partial<MusicSongInfo>): Promise<void> {
+		if (!isBrowserSupportedAudio(file)) {
+			Toast({
+				theme: "warning",
+				message: "当前浏览器不支持这个音频格式"
+			});
+			return;
+		}
+
+		upsertQueueItem(file, song, true);
+		state.value.popupVisible = true;
+		syncAudioSource();
+		persist();
+		await playCurrent();
+	}
+
+	function removeFromQueue(id: string): void {
+		const targetIndex = state.value.queue.findIndex((item) => item.id === id);
+		if (targetIndex < 0) {
+			return;
+		}
+
+		const wasPlayingCurrent = state.value.isPlaying && state.value.currentIndex === targetIndex;
+		releaseCoverURL(id);
+		metadataLoadedMap.delete(id);
+		state.value.queue.splice(targetIndex, 1);
+
+		if (!state.value.queue.length) {
+			clearQueue();
+			return;
+		}
+
+		if (state.value.currentIndex === targetIndex) {
+			state.value.currentIndex = Math.min(targetIndex, state.value.queue.length - 1);
+		} else if (targetIndex < state.value.currentIndex) {
+			state.value.currentIndex -= 1;
+		}
+
+		syncAudioSource();
+
+		if (wasPlayingCurrent) {
+			void playCurrent();
+			return;
+		}
+
+		persist();
+	}
+
+	function clearQueue(): void {
+		const audio = ensureAudio();
+		if (audio) {
+			audio.pause();
+			audio.removeAttribute("src");
+			audio.load();
+		}
+
+		for (const item of state.value.queue) {
+			releaseCoverURL(item.id);
+			metadataLoadedMap.delete(item.id);
+		}
+
+		state.value.queue = [];
+		state.value.currentIndex = -1;
+		state.value.isPlaying = false;
+		state.value.popupVisible = false;
+		persist();
+	}
+
+	function playPrev(): void {
+		if (!state.value.queue.length) {
+			return;
+		}
+
+		if (state.value.playMode === "single-loop") {
+			void playCurrent();
+			return;
+		}
+
+		if (0 < state.value.currentIndex) {
+			state.value.currentIndex -= 1;
+		} else if (state.value.playMode === "queue-loop") {
+			state.value.currentIndex = state.value.queue.length - 1;
+		}
+
+		syncAudioSource();
+		void playCurrent();
+	}
+
+	function playNext(): void {
+		if (!state.value.queue.length) {
+			return;
+		}
+
+		if (state.value.playMode === "single-loop") {
+			void playCurrent();
+			return;
+		}
+
+		if (state.value.currentIndex < state.value.queue.length - 1) {
+			state.value.currentIndex += 1;
+			syncAudioSource();
+			void playCurrent();
+			return;
+		}
+
+		if (state.value.playMode === "queue-loop") {
+			state.value.currentIndex = 0;
+			syncAudioSource();
+			void playCurrent();
+			return;
+		}
+
+		pauseCurrent();
+	}
+
+	return {
+		playMode,
+		queue,
+		isPlaying,
+		volume,
+		popupVisible,
+		hasQueue,
+		currentIndex,
+		currentQueueItem,
+		currentFile,
+		currentSong,
+		playModeLabel,
+		setPlayMode,
+		cyclePlayMode,
+		setVolume,
+		setPopupVisible,
+		setPlaying,
+		togglePlaying,
+		setCurrentIndex,
+		setQueue,
+		addToQueue,
+		enqueue,
+		playFile,
+		removeFromQueue,
+		clearQueue,
+		playPrev,
+		playNext
+	};
+});
--- a/src/store/navBarStore.ts
+++ b/src/store/navBarStore.ts
@@ -0,0 +1,64 @@
+import type { Component } from "vue";
+import { defineStore } from "pinia";
+
+export const useNavBarStore = defineStore("nav-bar", () => {
+	const route = useRoute();
+	const router = useRouter();
+
+	const height = ref(0);
+	const title = ref("");
+	const backTo = ref<string>();
+	const rightRenderer = shallowRef<Component>();
+	const rightOwner = ref<string>();
+
+	const isShowing = computed(() => !!router.currentRoute.value.meta.navBarVisible);
+	const canBack = computed(() => !!router.currentRoute.value.meta.navBarCanBack);
+
+	watch(
+		() => route.meta.navBarTitle,
+		(value) => {
+			title.value = typeof value === "string" ? value : "";
+		},
+		{ immediate: true }
+	);
+
+	function setHeight(value: number): void {
+		height.value = value;
+	}
+
+	function setBackTo(path?: string): void {
+		backTo.value = path;
+	}
+
+	function setTitle(value?: string): void {
+		title.value = value || "";
+	}
+
+	function setRightRenderer(renderer?: Component, owner?: string): void {
+		rightRenderer.value = renderer;
+		rightOwner.value = owner;
+	}
+
+	function clearRight(owner?: string): void {
+		if (owner && rightOwner.value !== owner) {
+			return;
+		}
+
+		rightRenderer.value = undefined;
+		rightOwner.value = undefined;
+	}
+
+	return {
+		height,
+		title,
+		backTo,
+		rightRenderer,
+		isShowing,
+		canBack,
+		setHeight,
+		setBackTo,
+		setTitle,
+		setRightRenderer,
+		clearRight
+	};
+});
--- a/src/store/settingStore.ts
+++ b/src/store/settingStore.ts
@@ -0,0 +1,165 @@
+import { defineStore } from "pinia";
+import Storage from "@/utils/Storage";
+
+const SETTING_STORAGE_KEY = "timi-server.setting";
+
+export type ConnectProtocol = "http" | "https";
+
+export interface ConnectSetting {
+	protocol: ConnectProtocol;
+	host: string;
+	port: string;
+	token: string;
+}
+
+export type DashboardSnapshotMetric = "os" | "cpu" | "memory" | "jvm" | "network" | "hardware" | "storage";
+export type DashboardHistoryMetric = "cpu" | "memory" | "jvm" | "network";
+
+export interface ServerDashboardSetting {
+	snapshotRefreshSeconds: number;
+	historyRefreshSeconds: number;
+	snapshotMetrics: DashboardSnapshotMetric[];
+	historyMetrics: DashboardHistoryMetric[];
+}
+
+export interface DashboardSetting {
+	server: ServerDashboardSetting;
+}
+
+interface SettingState {
+	connect: ConnectSetting;
+	dashboard: DashboardSetting;
+}
+
+const defaultConnectSetting = (): ConnectSetting => ({
+	protocol: "http",
+	host: "",
+	port: "",
+	token: ""
+});
+
+const defaultServerDashboardSetting = (): ServerDashboardSetting => ({
+	snapshotRefreshSeconds: 3,
+	historyRefreshSeconds: 10,
+	snapshotMetrics: ["os", "cpu", "memory", "jvm", "network", "hardware", "storage"],
+	historyMetrics: ["cpu", "memory", "jvm", "network"]
+});
+
+const defaultDashboardSetting = (): DashboardSetting => ({
+	server: defaultServerDashboardSetting()
+});
+
+const defaultSettingState = (): SettingState => ({
+	connect: defaultConnectSetting(),
+	dashboard: defaultDashboardSetting()
+});
+
+function normalizeConnectSetting(connect?: Partial<ConnectSetting>): ConnectSetting {
+	const protocol = connect?.protocol === "https" ? "https" : "http";
+
+	return {
+		protocol,
+		host: connect?.host?.trim() || "",
+		port: connect?.port?.trim() || "",
+		token: connect?.token?.trim() || ""
+	};
+}
+
+function normalizeSnapshotMetrics(metrics?: DashboardSnapshotMetric[]): DashboardSnapshotMetric[] {
+	const validMetrics: DashboardSnapshotMetric[] = ["os", "cpu", "memory", "jvm", "network", "hardware", "storage"];
+	const metricList = Array.isArray(metrics) ? metrics : [];
+	const normalizedMetrics = validMetrics.filter((metric) => metricList.includes(metric));
+	return normalizedMetrics.length ? normalizedMetrics : defaultServerDashboardSetting().snapshotMetrics;
+}
+
+function normalizeHistoryMetrics(metrics?: DashboardHistoryMetric[]): DashboardHistoryMetric[] {
+	const validMetrics: DashboardHistoryMetric[] = ["cpu", "memory", "jvm", "network"];
+	const metricList = Array.isArray(metrics) ? metrics : [];
+	const normalizedMetrics = validMetrics.filter((metric) => metricList.includes(metric));
+	return normalizedMetrics.length ? normalizedMetrics : defaultServerDashboardSetting().historyMetrics;
+}
+
+function normalizeRefreshSeconds(value?: number, fallback = 3): number {
+	if (typeof value !== "number" || Number.isNaN(value)) {
+		return fallback;
+	}
+
+	return Math.min(Math.max(Math.floor(value), 1), 120);
+}
+
+function normalizeServerDashboardSetting(setting?: Partial<ServerDashboardSetting>): ServerDashboardSetting {
+	const fallback = defaultServerDashboardSetting();
+	return {
+		snapshotRefreshSeconds: normalizeRefreshSeconds(setting?.snapshotRefreshSeconds, fallback.snapshotRefreshSeconds),
+		historyRefreshSeconds: normalizeRefreshSeconds(setting?.historyRefreshSeconds, fallback.historyRefreshSeconds),
+		snapshotMetrics: normalizeSnapshotMetrics(setting?.snapshotMetrics),
+		historyMetrics: normalizeHistoryMetrics(setting?.historyMetrics)
+	};
+}
+
+function normalizeDashboardSetting(setting?: Partial<DashboardSetting>): DashboardSetting {
+	return {
+		server: normalizeServerDashboardSetting(setting?.server)
+	};
+}
+
+export const useSettingStore = defineStore("setting", () => {
+	const state = ref<SettingState>(Storage.getDefault<SettingState>(SETTING_STORAGE_KEY, defaultSettingState()));
+	state.value.connect = normalizeConnectSetting(state.value.connect);
+	state.value.dashboard = normalizeDashboardSetting(state.value.dashboard);
+	persist();
+
+	const connect = computed(() => state.value.connect);
+	const dashboard = computed(() => state.value.dashboard);
+	const hasConnectConfig = computed(() => {
+		const currentConnect = state.value.connect;
+		return !!currentConnect.host && !!currentConnect.port && !!currentConnect.token;
+	});
+
+	function persist(): void {
+		Storage.setObject(SETTING_STORAGE_KEY, state.value);
+	}
+
+	function setConnect(connectSetting: Partial<ConnectSetting>): void {
+		state.value.connect = normalizeConnectSetting({
+			...state.value.connect,
+			...connectSetting
+		});
+		persist();
+	}
+
+	function resetConnect(): void {
+		state.value.connect = defaultConnectSetting();
+		persist();
+	}
+
+	function setServerDashboard(serverSetting: Partial<ServerDashboardSetting>): void {
+		state.value.dashboard.server = normalizeServerDashboardSetting({
+			...state.value.dashboard.server,
+			...serverSetting
+		});
+		persist();
+	}
+
+	function resolveBaseURL(): string {
+		const settingStore = useSettingStore();
+		const connect = settingStore.connect;
+		const envBaseURL = typeof import.meta.env.VITE_API === "string" ? import.meta.env.VITE_API.trim() : "";
+
+		if (connect.host && connect.port) {
+			return `${connect.protocol}://${connect.host}:${connect.port}`;
+		}
+
+		return envBaseURL.replace(/\/+$/, "");
+	}
+
+	return {
+		connect,
+		dashboard,
+		hasConnectConfig,
+		setConnect,
+		resetConnect,
+		setServerDashboard,
+		resolveBaseURL
+	};
+});
--- a/src/store/tabBarStore.ts
+++ b/src/store/tabBarStore.ts
@@ -0,0 +1,11 @@
+import { defineStore } from "pinia";
+
+export const useTabBarStore = defineStore("tab-bar", () => {
+	const router = useRouter();
+
+	const isShowing = computed(() => !!router.currentRoute.value.meta.tabBarVisible);
+
+	return {
+		isShowing
+	};
+});
--- a/src/types/Docker.ts
+++ b/src/types/Docker.ts
@@ -0,0 +1,63 @@
+export interface DockerContainerSummaryView {
+	id: string;
+	name: string;
+	image: string;
+	state: string;
+	status: string;
+	healthStatus?: string;
+	cpuPercent?: number;
+	memoryUsageBytes?: number;
+	memoryLimitBytes?: number;
+	memoryPercent?: number;
+	networkRxBytes?: number;
+	networkTxBytes?: number;
+	updatedAt: number;
+}
+
+export interface DockerContainerStatusView {
+	id: string;
+	name: string;
+	image: string;
+	imageId: string;
+	createdAt: number;
+	state: string;
+	status: string;
+	healthStatus?: string;
+	startedAt?: string;
+	finishedAt?: string;
+	exitCode?: number;
+	restartCount: number;
+	oomKilled: boolean;
+	cpuPercent?: number;
+	memoryUsageBytes?: number;
+	memoryLimitBytes?: number;
+	memoryPercent?: number;
+	networkRxBytes?: number;
+	networkTxBytes?: number;
+	blockReadBytes?: number;
+	blockWriteBytes?: number;
+	pids?: number;
+	updatedAt: number;
+}
+
+export interface DockerContainerHistoryView {
+	id: string;
+	name: string;
+	serverTime: number;
+	sampleRateMs: number;
+	from: number;
+	to: number;
+	points: DockerContainerHistoryPointView[];
+}
+
+export interface DockerContainerHistoryPointView {
+	at: number;
+	cpuPercent?: number;
+	memoryUsageBytes?: number;
+	memoryPercent?: number;
+	networkRxBytes?: number;
+	networkTxBytes?: number;
+	blockReadBytes?: number;
+	blockWriteBytes?: number;
+	pids?: number;
+}
--- a/src/types/File.ts
+++ b/src/types/File.ts
@@ -0,0 +1,12 @@
+export interface ServerFile {
+	name: string;
+	extension?: string;
+	absolutePath?: string;
+	size?: number;
+	modifiedAt?: number;
+	type?: string;
+	isFile?: boolean;
+	isDirectory?: boolean;
+	canPreview?: boolean;
+	previewURI?: string;
+}
--- a/src/types/System.ts
+++ b/src/types/System.ts
@@ -0,0 +1,108 @@
+export interface SystemStatusSnapshotView {
+	serverTime: number;
+	sampleRateMs: number;
+	snapshot: SystemStatusSnapshot;
+}
+
+export interface SystemStatusHistoryView {
+	serverTime: number;
+	sampleRateMs: number;
+	from: number;
+	to: number;
+	points: SystemStatusHistoryPoint[];
+}
+
+export interface SystemStatusSnapshot {
+	os?: {
+		name: string;
+		bootAt: number;
+	};
+	cpu?: {
+		model: string;
+		physicalCores: number;
+		logicalCores: number;
+		usageTotal: number;
+		usageSystem: number;
+		temperatureCelsius?: number;
+	};
+	memory?: {
+		totalBytes: number;
+		usedBytes: number;
+		swapTotalBytes: number;
+		swapUsedBytes: number;
+	};
+	jvm?: {
+		name: string;
+		version: string;
+		bootAt: number;
+		heapInitBytes: number;
+		heapMaxBytes: number;
+		heapUsedBytes: number;
+		heapCommittedBytes: number;
+		gc: {
+			collector: string;
+			cycleCount: number;
+			pauseCount: number;
+			lastPauseAt?: number;
+			lastRecoveredBytes?: number;
+		};
+	};
+	network?: {
+		interfaceName: string;
+		mac: string;
+		rxBytesPerSecond: number;
+		txBytesPerSecond: number;
+		rxTotalBytes: number;
+		txTotalBytes: number;
+		rxPacketsTotal: number;
+		txPacketsTotal: number;
+		inErrors?: number;
+		outErrors?: number;
+		inDrops?: number;
+		collisions?: number;
+	};
+	hardware?: {
+		fanSpeeds?: Array<number>;
+		baseboard?: {
+			manufacturer?: string;
+			model?: string;
+			version?: string;
+			serialNumber?: string;
+		};
+		firmware?: {
+			manufacturer?: string;
+			name?: string;
+			description?: string;
+			version?: string;
+			releaseDate?: string;
+		};
+	};
+	storagePartitions?: Array<{
+		diskName?: string;
+		diskModel?: string;
+		diskSerial?: string;
+		partitionId: string;
+		partitionName?: string;
+		partitionType?: string;
+		uuid: string;
+		mountPoint: string;
+		total: number;
+		used: number;
+		transferTimeMs?: number;
+		healthStatus?: string;
+	}>;
+}
+
+export interface SystemStatusHistoryPoint {
+	at: number;
+	cpuUsagePercent: number;
+	cpuSystemPercent: number;
+	memoryUsedBytes: number;
+	swapUsedBytes: number;
+	heapUsedBytes: number;
+	heapCommittedBytes: number;
+	gcCycleTimeMs: number;
+	gcPauseTimeMs: number;
+	rxBytesPerSecond: number;
+	txBytesPerSecond: number;
+}
--- a/src/types/Ups.ts
+++ b/src/types/Ups.ts
@@ -0,0 +1,54 @@
+export interface UpsStatusView {
+	serverTime: number;
+	upsTime: number;
+	hostName: string;
+	customer: string;
+	version: string;
+	deviceId: string;
+	upsType: string;
+	morphological: string;
+	ioPhase: string;
+	workMode: string;
+	inputVoltage: number;
+	inputFrequency?: number;
+	outputVoltage: number;
+	outputFrequency: number;
+	outputLoadPercent: number;
+	batteryVoltage: number;
+	batteryCapacity: number;
+	batteryRemainTime: number;
+	temperature: number;
+	bypassActive: boolean;
+	shutdownActive: boolean;
+	outputOn: boolean;
+	charging: boolean;
+	faultType?: string;
+	faultKind?: string;
+	warnings: string[];
+}
+
+export interface UpsHistoryView {
+	serverTime: number;
+	sampleRateMs: number;
+	from: number;
+	to: number;
+	points: UpsHistoryPointView[];
+}
+
+export interface UpsHistoryPointView {
+	at: number;
+	upsTime: number;
+	workMode: string;
+	inputVoltage: number;
+	inputFrequency?: number;
+	outputVoltage: number;
+	outputFrequency: number;
+	outputLoadPercent: number;
+	batteryVoltage: number;
+	batteryCapacity: number;
+	batteryRemainTime: number;
+	temperature?: number;
+	bypassActive: boolean;
+	shutdownActive: boolean;
+	outputOn: boolean;
+}
--- a/src/types/router.ts
+++ b/src/types/router.ts
@@ -0,0 +1,18 @@
+declare module "vue-router" {
+	interface RouteMeta {
+		depth?: number;
+		dynamicDepth?: boolean;
+		baseDepth?: number;
+		ignoreConnectCheck?: boolean;
+		navBarVisible?: boolean;
+		navBarCanBack?: boolean;
+		navBarTitle?: string;
+		tabBarVisible?: boolean;
+		tabBarPadding?: boolean;
+		tabBarRoot?: boolean;
+		contentFixedHeight?: boolean;
+		bodyBackground?: string;
+	}
+}
+
+export {};
--- a/src/types/vue-virtual-scroller.d.ts
+++ b/src/types/vue-virtual-scroller.d.ts
@@ -0,0 +1,12 @@
+declare module "vue-virtual-scroller" {
+	import type { App, DefineComponent, Plugin } from "vue";
+
+	export const RecycleScroller: DefineComponent;
+	export const DynamicScroller: DefineComponent;
+	export const DynamicScrollerItem: DefineComponent;
+
+	export function install(app: App): void;
+
+	const VueVirtualScroller: Plugin;
+	export default VueVirtualScroller;
+}
--- a/src/utils/Storage.ts
+++ b/src/utils/Storage.ts
@@ -0,0 +1 @@
+export { default } from "../../../timi-web/src/utils/Storage";
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
@@ -0,0 +1,27 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.dom.json",
+	"compilerOptions": {
+		"baseUrl": ".",
+		"paths": {
+			"@/*": [
+				"src/*"
+			]
+		},
+		"types": [
+			"vite/client",
+			"tdesign-mobile-vue/global"
+		],
+		"strict": true,
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"noFallthroughCasesInSwitch": true,
+		"noUncheckedSideEffectImports": true
+	},
+	"include": [
+		"src/**/*.ts",
+		"src/**/*.d.ts",
+		"src/**/*.vue",
+		"auto-imports.d.ts",
+		"components.d.ts"
+	]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,11 @@
+{
+	"files": [],
+	"references": [
+		{
+			"path": "./tsconfig.app.json"
+		},
+		{
+			"path": "./tsconfig.node.json"
+		}
+	]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,13 @@
+{
+	"extends": "@tsconfig/node20/tsconfig.json",
+	"compilerOptions": {
+		"composite": true,
+		"module": "ESNext",
+		"moduleResolution": "Bundler",
+		"allowSyntheticDefaultImports": true
+	},
+	"include": [
+		"vite.config.ts",
+		".eslintrc.cjs"
+	]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,53 @@
+import { fileURLToPath, URL } from "node:url";
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { TDesignResolver } from "unplugin-vue-components/resolvers";
+
+export default defineConfig({
+	resolve: {
+		alias: {
+			"@": fileURLToPath(new URL("./src", import.meta.url))
+		}
+	},
+	plugins: [
+		vue(),
+		AutoImport({
+			imports: ["vue", "vue-router", "pinia"],
+			dts: "auto-imports.d.ts",
+			eslintrc: {
+				enabled: true,
+				filepath: "./.eslintrc-auto-import.json",
+				globalsPropValue: true
+			},
+			resolvers: [
+				TDesignResolver({
+					library: "mobile-vue"
+				})
+			]
+		}),
+		Components({
+			dirs: ["src/components", "src/layout"],
+			dts: "components.d.ts",
+			resolvers: [
+				TDesignResolver({
+					library: "mobile-vue"
+				})
+			]
+		})
+	],
+	css: {
+		preprocessorOptions: {
+			less: {
+				javascriptEnabled: true
+			}
+		}
+	},
+	server: {
+		port: 84,
+		allowedHosts: [
+			"server.imyeyu.dev"
+		]
+	}
+});
Author	SHA1	Message	Date
Timi	a6c89717a6	sync dashboard tab	2026-04-13 14:55:51 +08:00
Timi	df6c6b78c9	add DockerContainerDetail.vue	2026-04-13 14:55:51 +08:00
Timi	3393cca441	implement Docker	2026-04-13 14:55:50 +08:00
Timi	b95d7fe9b6	implement UPS	2026-04-13 14:55:50 +08:00
Timi	ed2d2ef233	add ServerPartitionsDetail.vue	2026-04-13 14:55:50 +08:00
Timi	611830f393	update ServerDashboard	2026-04-13 14:55:50 +08:00
Timi	489cbb5d0f	add Dashboard	2026-04-10 00:01:38 +08:00
Timi	d9e32c4dbe	add MusicPlayer	2026-04-09 20:53:46 +08:00
Timi	788db69bc8	fix FileExplorerList.vue fileName	2026-04-04 22:38:19 +08:00
Timi	594d1b4222	fix MainLayout.vue content height	2026-04-03 23:44:46 +08:00
Timi	d819249ebf	fix FileExplorer style	2026-04-03 21:17:14 +08:00
Timi	59016f492f	fix FileExplorer layout	2026-04-03 17:40:15 +08:00
Timi	603a503644	update FileExplorer	2026-04-03 14:58:30 +08:00
Timi	ded231671a	add FileExplorerPage	2026-04-03 13:43:31 +08:00
Timi	2665acc885	init project	2026-04-03 12:02:34 +08:00
				`@@ -0,0 +1 @@`
				`export { default } from "../../../timi-web/src/utils/Storage";`