timi/timi-server
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update DashboardSetting.vue style

Browse Source
This commit is contained in:
Timi
2026-04-13 17:20:57 +08:00
parent 2f45330ebd
commit 9942afafa7
8 changed files with 57 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/pages/dashboard/ServerDashboard/ServerDashboard.vue
View File

@@ -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

4
src/pages/setting/ConnectSetting.vue
View File

@@ -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;

265
src/pages/setting/DashboardSetting.vue
View File

@@ -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;
const snapshotRefreshValue = computed({
get: (): number => normalizeRefreshValue(settingStore.dashboard.server.snapshotRefreshSeconds, 1, 10, 3),
set: (value: number): void => {
settingStore.setServerDashboard({
snapshotRefreshSeconds: normalizeRefreshValue(value, 1, 10, 3)
});
}
});
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;
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)
});
}
});
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)) {
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>

8
src/pages/tabs/SettingsTab.vue
View File

@@ -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>