update DashboardSetting.vue style

2026-04-13 17:20:57 +08:00
parent 2f45330ebd
commit 9942afafa7
8 changed files with 57 additions and 274 deletions
--- 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/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/setting/ConnectSetting.vue
+++ b/src/pages/setting/ConnectSetting.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="connect-setting">
-		<t-cell-group title="服务器连接" theme="card">
+		<t-cell-group theme="card">
 			<t-cell title="使用 HTTPS">
 				<template #rightIcon>
 					<t-switch v-model="httpsEnabled" />
@@ -140,7 +140,7 @@ function validateConnect(): boolean {

 <style scoped lang="less">
 .connect-setting {
-	padding-top: var(--app-nav-offset);
+	padding-top: calc(var(--app-nav-offset) + 1rem);

 	:deep(.t-input:last-child:after) {
 		background: transparent;
--- 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,170 +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"]
+			snapshotRefreshSeconds: normalizeRefreshValue(value, 1, 10, 3)
 		});
+	}
+});

-	Toast({
-		theme: "success",
-		message: "已恢复默认配置"
+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 normalizeSecondValue(value: string, fallback: number): number {
-	const numberValue = Number(value);
-	if (Number.isNaN(numberValue)) {
+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;
-	}
+.dashboard-setting {
+	padding-top: var(--app-nav-offset);
 }
 </style>
--- a/src/pages/tabs/SettingsTab.vue
+++ b/src/pages/tabs/SettingsTab.vue
@@ -1,14 +1,18 @@
 <template>
 	<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"
 });
@@ -19,5 +23,9 @@ const router = useRouter();
 <style scoped lang="less">
 .settings-tab {
 	padding-top: calc(var(--app-nav-offset) + 1rem);
+
+	.title {
+		text-align: center;
+	}
 }
 </style>
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -144,7 +144,8 @@ const router = createRouter({
 								navBarVisible: true,
 								navBarCanBack: true,
 								navBarTitle: "仪表板设置",
-								tabBarVisible: false
+								tabBarVisible: false,
+								bodyBackground: "#F4F4F4"
 							},
 							component: DashboardSetting
 						},
--- 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)
 	};
 }