add manifest

update DashboardSetting.vue style
update ThemeSetting.vue style
2026-04-13 18:29:36 +08:00 · 2026-04-13 17:20:57 +08:00 · 2026-04-13 16:45:48 +08:00 · 2026-04-13 16:11:37 +08:00
16 changed files with 302 additions and 580 deletions
--- a/index.html
+++ b/index.html
@@ -3,7 +3,14 @@
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+		<meta name="application-name" content="Timi Server" />
+		<meta name="mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-capable" content="yes" />
+		<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+		<meta name="apple-mobile-web-app-title" content="Timi Server" />
+		<meta name="format-detection" content="telephone=no" />
 		<meta name="theme-color" content="#ffffff" />
+		<link rel="manifest" href="/manifest.webmanifest" />
 		<title>Timi Server</title>
 	</head>
 	<body>
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
 		"pinia": "^3.0.2",
 		"tdesign-mobile-vue": "^1.13.2",
 		"timi-tdesign-mobile": "0.0.9",
-		"timi-web": "0.0.17",
+		"timi-web": "0.0.18",
 		"ts-node": "^10.9.2",
 		"vue": "^3.5.16",
 		"vue-router": "4.5.1",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,8 +30,8 @@ importers:
        specifier: 0.0.9
        version: 0.0.9(typescript@5.8.3)
      timi-web:
-        specifier: 0.0.17
-        version: 0.0.17
+        specifier: 0.0.18
+        version: 0.0.18
      ts-node:
        specifier: ^10.9.2
        version: 10.9.2(@types/node@24.12.0)(typescript@5.8.3)
@@ -1832,8 +1832,8 @@ packages:
    resolution: {integrity: sha512-SV8m/FsLsEabSmJ/NvI650fLyb/JCLz7JUNQrkWeoo5xICElsN4x39L3n4lTzu6ARidjpT6uA+XEmA4wnyQmuA==}
    engines: {node: '>=16.0.0'}

-  timi-web@0.0.17:
-    resolution: {integrity: sha512-6ycsqfnl+zeQkgOICjhhJYHoo3CtCxnhaNFFirNLVfX/VrrTDjW7DiR+/W8bouZzx6AR19fZKyG+UE0BKKBURg==}
+  timi-web@0.0.18:
+    resolution: {integrity: sha512-e7QDPZbt7ZVvghtYwgpZrWJ0onIB4WNMhUaODCYyOdeUmi6PGQk4Aax/Gyo1M12MflrjaBUmlCF+9kPAqKGdtQ==}
    engines: {node: '>=16.0.0'}

  tinycolor2@1.6.0:
@@ -3875,7 +3875,7 @@ snapshots:
    transitivePeerDependencies:
      - typescript

-  timi-web@0.0.17:
+  timi-web@0.0.18:
    dependencies:
      axios: 1.13.5
      less: 4.5.1
--- a/public/manifest.webmanifest
+++ b/public/manifest.webmanifest
@@ -0,0 +1,10 @@
+{
+	"name": "Timi Server",
+	"short_name": "Timi",
+	"lang": "zh-CN",
+	"start_url": "/",
+	"scope": "/",
+	"display": "standalone",
+	"background_color": "#ffffff",
+	"theme_color": "#ffffff"
+}
--- a/src/layout/MainLayout.vue
+++ b/src/layout/MainLayout.vue
@@ -5,9 +5,14 @@
 			v-if="navBarStore.isShowing"
 			class="nav-bar"
 			:title="navBarStore.title"
-			:left-arrow="!!navBarStore.canBack"
-			@left-click="doBack"
+			:left-arrow="!hasCustomLeft && !!navBarStore.canBack"
+			@left-click="onLeftClick"
 		>
+			<template v-if="hasCustomLeft" #left>
+				<div class="nav-extra nav-extra-left">
+					<component :is="navBarStore.leftRenderer" />
+				</div>
+			</template>
 			<template #right>
 				<div class="nav-extra">
 					<component :is="navBarStore.rightRenderer" v-if="navBarStore.rightRenderer" />
@@ -80,6 +85,8 @@ onUnmounted(() => {

 // ---------- 导航返回 ----------

+const hasCustomLeft = computed(() => !!navBarStore.leftRenderer);
+
 function doBack(): void {
 	if (navBarStore.backTo) {
 		router.push(navBarStore.backTo);
@@ -89,6 +96,14 @@ function doBack(): void {
 	}
 }

+function onLeftClick(): void {
+	if (hasCustomLeft.value) {
+		return;
+	}
+
+	doBack();
+}
+
 const navBarPadding = computed(() => {
 	if (navBarStore.isShowing) {
 		return `${navBarStore.height || 48}px`;
@@ -202,6 +217,10 @@ const contentHeight = computed(() => {
 			align-items: center;
 			justify-content: flex-end;
 		}
+
+		.nav-extra-left {
+			justify-content: flex-start;
+		}
 	}

 	.router-view {
--- a/src/main.ts
+++ b/src/main.ts
@@ -11,6 +11,53 @@ import "vue-virtual-scroller/dist/vue-virtual-scroller.css";
 import { axios } from "timi-web";
 import { useSettingStore } from "@/store/settingStore.ts";

+type FullscreenElement = HTMLElement & {
+	webkitRequestFullscreen?: () => Promise<void> | void;
+	msRequestFullscreen?: () => Promise<void> | void;
+};
+
+type StandaloneNavigator = Navigator & {
+	standalone?: boolean;
+};
+
+const requestLaunchFullscreen = async (): Promise<void> => {
+	if (document.fullscreenElement) {
+		return;
+	}
+
+	const navigatorInfo = window.navigator as StandaloneNavigator;
+	const isStandaloneMode = window.matchMedia("(display-mode: standalone)").matches || navigatorInfo.standalone === true;
+	if (isStandaloneMode) {
+		return;
+	}
+
+	const rootElement = document.documentElement as FullscreenElement;
+	if (rootElement.requestFullscreen) {
+		await rootElement.requestFullscreen();
+		return;
+	}
+	if (rootElement.webkitRequestFullscreen) {
+		await rootElement.webkitRequestFullscreen();
+		return;
+	}
+	if (rootElement.msRequestFullscreen) {
+		await rootElement.msRequestFullscreen();
+	}
+};
+
+const bindLaunchFullscreenRequest = (): void => {
+	const onFirstInteraction = async (): Promise<void> => {
+		try {
+			await requestLaunchFullscreen();
+		} catch (error) {
+			console.warn("\u5168\u5c4f\u8bf7\u6c42\u88ab\u6d4f\u89c8\u5668\u62d2\u7edd\u6216\u4e0d\u652f\u6301", error);
+		}
+	};
+
+	window.addEventListener("pointerdown", onFirstInteraction, { once: true, passive: true });
+	window.addEventListener("keydown", onFirstInteraction, { once: true });
+};
+
 axios.interceptors.request.use((config) => {
 	const settingStore = useSettingStore();
 	const token = settingStore.connect.token.trim();
@@ -35,9 +82,10 @@ app.config.errorHandler = (error) => {
 	console.error(error);
 	Toast({
 		theme: "error",
-		message: "页面发生异常，请稍后重试"
+		message: "\u9875\u9762\u53d1\u751f\u5f02\u5e38\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5"
 	});
 };
 app.use(pinia);
 app.use(router);
 app.mount("#root");
+bindLaunchFullscreenRequest();
--- a/src/pages/dashboard/ServerDashboard/ServerDashboard.vue
+++ b/src/pages/dashboard/ServerDashboard/ServerDashboard.vue
@@ -140,14 +140,16 @@ 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;
+type HistoryMetric = "cpu" | "memory" | "jvm" | "network";
+
+const SERVER_SNAPSHOT_METRICS = ["os", "cpu", "memory", "jvm", "network", "hardware", "storage"] as const;
+const SERVER_HISTORY_METRICS = ["cpu", "memory", "jvm", "network"] as const;

 use([
 	SVGRenderer,
@@ -262,7 +264,7 @@ const historyMetricTabs = computed(() => {
 		network: "网络"
 	};

-	return settingStore.dashboard.server.historyMetrics.map((metric) => ({
+	return SERVER_HISTORY_METRICS.map((metric) => ({
 		value: metric,
 		label: labelMap[metric]
 	}));
@@ -635,7 +637,7 @@ async function refreshSnapshot(): Promise<void> {
 	}
 	isSnapshotLoading.value = true;
 	try {
-		const metrics = settingStore.dashboard.server.snapshotMetrics.join(",");
+		const metrics = SERVER_SNAPSHOT_METRICS.join(",");
 		snapshotView.value = await SystemAPI.getStatus(metrics);
 	} catch (error) {
 		Toast({
@@ -657,7 +659,7 @@ async function refreshHistory(): Promise<void> {
 	}
 	isHistoryLoading.value = true;
 	try {
-		const metrics = settingStore.dashboard.server.historyMetrics.join(",");
+		const metrics = SERVER_HISTORY_METRICS.join(",");
 		const historyView = await SystemAPI.getStatusHistory({
 			window: "1h",
 			metrics
--- a/src/pages/file/FileExplorerPage.vue
+++ b/src/pages/file/FileExplorerPage.vue
@@ -393,10 +393,4 @@ function getDirectoryKey(pathSegments: string[]): string {
 		font-size: .8125rem;
 	}
 }
-
-:global(.theme-dark) .page {
-	.go-up {
-		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .22);
-	}
-}
 </style>
--- a/src/pages/setting/ConnectSetting.vue
+++ b/src/pages/setting/ConnectSetting.vue
@@ -1,103 +1,84 @@
 <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 class="connect-setting">
+		<t-cell-group theme="card">
+			<t-cell title="使用 HTTPS">
+				<template #rightIcon>
+					<t-switch v-model="httpsEnabled" />
+				</template>
+			</t-cell>
+			<t-input
+				v-model.trim="form.host"
+				clearable
+				label="地址"
+				placeholder="192.168.1.10 或 nas.local"
+			/>
+			<t-input
+				v-model.trim="form.port"
+				clearable
+				label="端口"
+				placeholder="8080"
+				type="number"
+			/>
+			<t-input
+				v-model.trim="form.token"
+				clearable
+				label="密钥"
+				placeholder="请输入访问密钥"
+			/>
+		</t-cell-group>
 	</div>
 </template>

 <script setup lang="ts">
 import { Toast } from "tdesign-mobile-vue";
-import type { ConnectProtocol, ConnectSetting } from "@/store/settingStore";
+import { useNavBarStore } from "@/store/navBarStore";
+import type { ConnectSetting } from "@/store/settingStore";
 import { useSettingStore } from "@/store/settingStore";

 defineOptions({
 	name: "ConnectSetting"
 });

+
+const router = useRouter();
+const navBarStore = useNavBarStore();
 const settingStore = useSettingStore();

-const form = reactive<ConnectSetting>({
-	protocol: "http",
-	host: "",
-	port: "",
-	token: ""
+// ---------- 顶部导航 ----------
+
+const navBarOwner = `connect-setting-${Math.random().toString(36).slice(2)}`;
+
+const navBarLeftRenderer = defineComponent({
+	name: "connect-setting-nav-left",
+	setup() {
+		const buttonComponent = resolveComponent("t-button");
+
+		return () => h(buttonComponent, {
+			variant: "text",
+			theme: "default",
+			size: "small",
+			onClick: cancelConnect
+		}, () => "取消");
+	}
 });

-watch(
-	() => settingStore.connect,
-	(connect) => {
-		Object.assign(form, connect);
-	},
-	{ immediate: true }
-);
+const navBarRightRenderer = defineComponent({
+	name: "connect-setting-nav-right",
+	setup() {
+		const buttonComponent = resolveComponent("t-button");

-function setProtocol(protocol: ConnectProtocol): void {
-	form.protocol = protocol;
+		return () => h(buttonComponent, {
+			variant: "text",
+			theme: "primary",
+			size: "small",
+			onClick: saveConnect
+		}, () => "保存");
 	}
-
-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 cancelConnect(): void {
+	Object.assign(form, settingStore.connect);
+	router.back();
 }

 function saveConnect(): void {
@@ -112,69 +93,57 @@ function saveConnect(): void {
 	});
 }

-function resetConnect(): void {
-	settingStore.resetConnect();
-	Object.assign(form, settingStore.connect);
-	Toast({
-		theme: "success",
-		message: "连接配置已清空"
+onMounted(() => {
+	navBarStore.setLeftRenderer(navBarLeftRenderer, navBarOwner);
+	navBarStore.setRightRenderer(navBarRightRenderer, navBarOwner);
 });
+
+onUnmounted(() => {
+	navBarStore.clearLeft(navBarOwner);
+	navBarStore.clearRight(navBarOwner);
+});
+
+// ---------- 表单 ----------
+
+const form = reactive<ConnectSetting>({
+	protocol: "http",
+	host: "",
+	port: "",
+	token: ""
+});
+
+watch(() => settingStore.connect, (connect) => {
+	Object.assign(form, connect);
+}, { immediate: true });
+
+const httpsEnabled = computed({
+	get: () => form.protocol === "https",
+	set: (value: boolean) => {
+		form.protocol = value ? "https" : "http";
+	}
+});
+
+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;
 }
 </script>

 <style scoped lang="less">
-.page {
-	padding: 1rem;
+.connect-setting {
+	padding-top: calc(var(--app-nav-offset) + 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);
+	:deep(.t-input:last-child:after) {
+		background: transparent;
 	}
 }
 </style>
--- a/src/pages/setting/DashboardSetting.vue
+++ b/src/pages/setting/DashboardSetting.vue
@@ -1,88 +1,18 @@
 <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 class="dashboard-setting">
+		<t-cell-group title="刷新频率" theme="card">
+			<t-cell-info label="当前状态" :value="`${snapshotRefreshValue} 秒`">
+				<t-slider v-model="snapshotRefreshValue" :max="10" :min="1" :step="1" />
+			</t-cell-info>
+			<t-cell-info label="历史采样" :value="`${historyRefreshValue} 秒`">
+				<t-slider v-model="historyRefreshValue" :max="10" :min="3" :step="1" />
+			</t-cell-info>
+		</t-cell-group>
 	</div>
 </template>

 <script setup lang="ts">
-import { Toast } from "tdesign-mobile-vue";
-import {
-	useSettingStore,
-	type DashboardHistoryMetric,
-	type DashboardSnapshotMetric,
-	type ServerDashboardSetting
-} from "@/store/settingStore";
+import { useSettingStore } from "@/store/settingStore";

 defineOptions({
 	name: "DashboardSetting"
@@ -90,176 +20,35 @@ defineOptions({

 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 {
+const snapshotRefreshValue = computed({
+	get: (): number => normalizeRefreshValue(settingStore.dashboard.server.snapshotRefreshSeconds, 1, 10, 3),
+	set: (value: number): void => {
 		settingStore.setServerDashboard({
-		snapshotRefreshSeconds: 3,
-		historyRefreshSeconds: 10,
-		snapshotMetrics: ["os", "cpu", "memory", "jvm", "network", "hardware", "storage"],
-		historyMetrics: ["cpu", "memory", "jvm", "network"]
-	});
-
-	Toast({
-		theme: "success",
-		message: "已恢复默认配置"
+			snapshotRefreshSeconds: normalizeRefreshValue(value, 1, 10, 3)
 		});
 	}
+});

-function normalizeSecondValue(value: string, fallback: number): number {
-	const numberValue = Number(value);
-	if (Number.isNaN(numberValue)) {
+const historyRefreshValue = computed({
+	get: (): number => normalizeRefreshValue(settingStore.dashboard.server.historyRefreshSeconds, 3, 10, 10),
+	set: (value: number): void => {
+		settingStore.setServerDashboard({
+			historyRefreshSeconds: normalizeRefreshValue(value, 3, 10, 10)
+		});
+	}
+});
+
+function normalizeRefreshValue(value: number, min: number, max: number, fallback: number): number {
+	if (Number.isNaN(value)) {
 		return fallback;
 	}
-
-	return Math.min(Math.max(Math.floor(numberValue), 1), 120);
+	const normalizedValue = Math.floor(value);
+	return Math.min(Math.max(normalizedValue, min), max);
 }
 </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);
-	}
+.dashboard-setting {
+	padding-top: var(--app-nav-offset);
 }
 </style>
--- a/src/pages/setting/ThemeSetting.vue
+++ b/src/pages/setting/ThemeSetting.vue
@@ -1,24 +1,18 @@
 <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
+	<div class="theme-setting">
+		<t-cell-group theme="card">
+			<t-radio
 				v-for="item in themeModeList"
 				:key="item.value"
-					theme="primary"
-					:variant="globalUIStore.themeMode === item.value ? 'base' : 'outline'"
+				class="block"
+				default-checked
+				allow-uncheck
+				:label="item.label"
+				icon="line"
+				:checked="globalUIStore.themeMode === item.value"
 				@click="globalUIStore.setThemeMode(item.value)"
-				>
-					<span v-text="item.label" />
-				</t-button>
-			</div>
-		</section>
+			/>
+		</t-cell-group>
 	</div>
 </template>

@@ -39,55 +33,14 @@ const themeModeList: Array<{ label: string; value: ThemeMode }> = [
 </script>

 <style scoped lang="less">
-.page {
-	padding: 1rem;
+.theme-setting {
+	padding-top: calc(var(--app-nav-offset) + 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);
-	}
+	:deep(.t-radio:last-child) {

-	.head {
-		gap: .5rem;
-		display: flex;
-		flex-direction: column;
+		.t-radio__border {
+			display: none;
 		}
-
-	.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/tabs/SettingsTab.vue
+++ b/src/pages/tabs/SettingsTab.vue
@@ -1,99 +1,31 @@
 <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 class="settings-tab">
+		<h2 class="title">Timi Server</h2>
+		<t-cell-group theme="card">
+			<t-cell title="连接配置" arrow @click="router.push('/settings/connect')" />
+			<t-cell title="仪表板" arrow @click="router.push('/settings/dashboard')" />
+			<t-cell title="主题" arrow @click="router.push('/settings/theme')" />
+		</t-cell-group>
+		<copyright icp="粤ICP备2025368555号-1" domain="imyeyu.com" author="夜雨" />
 	</div>
 </template>

 <script setup lang="ts">
+import { Copyright } from "timi-web";
+
 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;
+.settings-tab {
+	padding-top: calc(var(--app-nav-offset) + 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;
-	}
-
-	.entries {
-		gap: .75rem;
-		display: flex;
-		flex-direction: column;
-	}
-}
-
-:global(.theme-dark) .page {
-	.card {
-		box-shadow: 0 .35rem 1rem rgba(0, 0, 0, .2);
+	.title {
+		text-align: center;
 	}
 }
 </style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -131,7 +131,8 @@ const router = createRouter({
 								navBarVisible: true,
 								navBarCanBack: true,
 								navBarTitle: "连接配置",
-								tabBarVisible: false
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
 							},
 							component: ConnectSetting
 						},
@@ -143,7 +144,8 @@ const router = createRouter({
 								navBarVisible: true,
 								navBarCanBack: true,
 								navBarTitle: "仪表板设置",
-								tabBarVisible: false
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
 							},
 							component: DashboardSetting
 						},
@@ -155,7 +157,8 @@ const router = createRouter({
 								navBarVisible: true,
 								navBarCanBack: true,
 								navBarTitle: "主题设置",
-								tabBarVisible: false
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
 							},
 							component: ThemeSetting
 						}
--- a/src/router/tabs.ts
+++ b/src/router/tabs.ts
@@ -43,7 +43,7 @@ const tabs: RouteRecordRaw[] = [
 			tabBarVisible: true,
 			tabBarRoot: true,
 			tabBarPadding: true,
-			bodyBackground: "#FFF"
+			bodyBackground: "#F4F4F4"
 		},
 		component: SettingsTab
 	}
--- a/src/store/navBarStore.ts
+++ b/src/store/navBarStore.ts
@@ -8,6 +8,8 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 	const height = ref(0);
 	const title = ref("");
 	const backTo = ref<string>();
+	const leftRenderer = shallowRef<Component>();
+	const leftOwner = ref<string>();
 	const rightRenderer = shallowRef<Component>();
 	const rightOwner = ref<string>();

@@ -34,6 +36,20 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 		title.value = value || "";
 	}

+	function setLeftRenderer(renderer?: Component, owner?: string): void {
+		leftRenderer.value = renderer;
+		leftOwner.value = owner;
+	}
+
+	function clearLeft(owner?: string): void {
+		if (owner && leftOwner.value !== owner) {
+			return;
+		}
+
+		leftRenderer.value = undefined;
+		leftOwner.value = undefined;
+	}
+
 	function setRightRenderer(renderer?: Component, owner?: string): void {
 		rightRenderer.value = renderer;
 		rightOwner.value = owner;
@@ -52,12 +68,15 @@ export const useNavBarStore = defineStore("nav-bar", () => {
 		height,
 		title,
 		backTo,
+		leftRenderer,
 		rightRenderer,
 		isShowing,
 		canBack,
 		setHeight,
 		setBackTo,
 		setTitle,
+		setLeftRenderer,
+		clearLeft,
 		setRightRenderer,
 		clearRight
 	};
--- a/src/store/settingStore.ts
+++ b/src/store/settingStore.ts
@@ -12,14 +12,9 @@ export interface ConnectSetting {
 	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 {
@@ -40,9 +35,7 @@ const defaultConnectSetting = (): ConnectSetting => ({

 const defaultServerDashboardSetting = (): ServerDashboardSetting => ({
 	snapshotRefreshSeconds: 3,
-	historyRefreshSeconds: 10,
-	snapshotMetrics: ["os", "cpu", "memory", "jvm", "network", "hardware", "storage"],
-	historyMetrics: ["cpu", "memory", "jvm", "network"]
+	historyRefreshSeconds: 10
 });

 const defaultDashboardSetting = (): DashboardSetting => ({
@@ -65,20 +58,6 @@ function normalizeConnectSetting(connect?: Partial<ConnectSetting>): ConnectSett
 	};
 }

-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;
@@ -91,9 +70,7 @@ function normalizeServerDashboardSetting(setting?: Partial<ServerDashboardSettin
 	const fallback = defaultServerDashboardSetting();
 	return {
 		snapshotRefreshSeconds: normalizeRefreshSeconds(setting?.snapshotRefreshSeconds, fallback.snapshotRefreshSeconds),
-		historyRefreshSeconds: normalizeRefreshSeconds(setting?.historyRefreshSeconds, fallback.historyRefreshSeconds),
-		snapshotMetrics: normalizeSnapshotMetrics(setting?.snapshotMetrics),
-		historyMetrics: normalizeHistoryMetrics(setting?.historyMetrics)
+		historyRefreshSeconds: normalizeRefreshSeconds(setting?.historyRefreshSeconds, fallback.historyRefreshSeconds)
 	};
 }
Author	SHA1	Message	Date
Timi	631122c79b	add manifest	2026-04-13 18:29:36 +08:00
Timi	9942afafa7	update DashboardSetting.vue style	2026-04-13 17:20:57 +08:00
Timi	2f45330ebd	update ThemeSetting.vue style	2026-04-13 16:45:48 +08:00
Timi	753ab56e06	update ConnectSetting.vue	2026-04-13 16:11:37 +08:00