feat(dashboard): refine network and scheduler visuals

2026-07-14 00:42:31 +08:00 · 2026-06-29 07:37:03 +08:00
parent 75dffdb7c2
commit 7452e18fc3
5 changed files with 145 additions and 98 deletions
--- a/src/pages/dashboard.vue
+++ b/src/pages/dashboard.vue
@@ -217,8 +217,8 @@ const dashboardConfigs = ref<DashboardItem[]>([
    name: t('dashboard.network'),
    key: '',
    attrs: {},
-    cols: { cols: 12, md: 6 },
-    rows: 17,
+    cols: { cols: 12, sm: 3, md: 4 },
+    rows: DASHBOARD_RESOURCE_CHART_ROWS,
    elements: [],
  },
  {
--- a/src/utils/schedulerVisual.ts
+++ b/src/utils/schedulerVisual.ts
@@ -0,0 +1,68 @@
+import type { ScheduleInfo } from '@/api/types'
+
+// 定时服务在捷径和仪表板中共用的视觉配置。
+export type SchedulerVisual = {
+  color: string
+  icon: string
+  rgb: string
+}
+
+// 已知定时服务的视觉匹配规则。
+type SchedulerVisualRule = SchedulerVisual & {
+  ids?: string[]
+  names?: string[]
+  providers?: string[]
+}
+
+const schedulerVisualRules: SchedulerVisualRule[] = [
+  { ids: ['cookiecloud'], names: ['CookieCloud'], icon: 'mdi-cloud-sync-outline', color: '#3f8cff', rgb: '63, 140, 255' },
+  { ids: ['mediaserver_sync'], names: ['媒体服务器'], icon: 'mdi-television-play', color: '#42c336', rgb: '66, 195, 54' },
+  { ids: ['new_subscribe_search', 'subscribe_search'], names: ['订阅搜索', '新增订阅搜索'], icon: 'mdi-magnify', color: '#e91e63', rgb: '233, 30, 99' },
+  { ids: ['subscribe_tmdb'], names: ['订阅元数据'], icon: 'mdi-database-search-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
+  { ids: ['subscribe_refresh'], names: ['订阅刷新'], icon: 'mdi-refresh', color: '#25b6c8', rgb: '37, 182, 200' },
+  { ids: ['subscribe_follow'], names: ['订阅分享'], icon: 'mdi-share-variant-outline', color: '#ff704d', rgb: '255, 112, 77' },
+  { ids: ['transfer'], names: ['下载文件整理', '文件整理'], icon: 'mdi-folder-move-outline', color: '#3f8cff', rgb: '63, 140, 255' },
+  { ids: ['random_wallpager'], names: ['壁纸'], icon: 'mdi-image-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
+  { ids: ['scheduler_job'], names: ['公共定时服务'], icon: 'mdi-clock-outline', color: '#42c336', rgb: '66, 195, 54' },
+  { ids: ['clear_cache'], names: ['缓存清理'], icon: 'mdi-delete-sweep-outline', color: '#ffad1f', rgb: '255, 173, 31' },
+  { ids: ['data_cleanup'], names: ['数据表清理'], icon: 'mdi-database-remove-outline', color: '#ff704d', rgb: '255, 112, 77' },
+  { ids: ['user_auth'], names: ['用户认证'], icon: 'mdi-account-check-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
+  { ids: ['sitedata_refresh'], names: ['站点数据'], icon: 'mdi-web-refresh', color: '#25b6c8', rgb: '37, 182, 200' },
+  { ids: ['recommend_refresh'], names: ['推荐缓存'], icon: 'mdi-star-outline', color: '#ffad1f', rgb: '255, 173, 31' },
+  { ids: ['plugin_market_refresh'], names: ['插件市场'], icon: 'mdi-puzzle-outline', color: '#ff704d', rgb: '255, 112, 77' },
+  { ids: ['subscribe_calendar_cache'], names: ['订阅日历'], icon: 'mdi-calendar-refresh-outline', color: '#3f8cff', rgb: '63, 140, 255' },
+  { ids: ['full_gc'], names: ['内存回收'], icon: 'mdi-memory', color: '#25b6c8', rgb: '37, 182, 200' },
+  { ids: ['agent_heartbeat'], names: ['智能体'], icon: 'mdi-robot-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
+  { ids: ['usage_report'], names: ['统计上报'], icon: 'mdi-chart-line', color: '#42c336', rgb: '66, 195, 54' },
+  { ids: ['workflow'], providers: ['工作流'], icon: 'mdi-source-branch', color: '#3f8cff', rgb: '63, 140, 255' },
+  { ids: ['plugin'], icon: 'mdi-puzzle-outline', color: '#ff704d', rgb: '255, 112, 77' },
+]
+
+const schedulerFallbackVisual: SchedulerVisual = {
+  icon: 'mdi-timer-cog-outline',
+  color: '#25b6c8',
+  rgb: '37, 182, 200',
+}
+
+/** 判断视觉规则中的任一文本是否命中任务信息。 */
+function hasSchedulerRuleMatch(values: string[] | undefined, target: string) {
+  if (!values?.length) return false
+
+  return values.some(value => target.includes(value.toLocaleLowerCase()))
+}
+
+/** 使用任务 ID、名称和提供者返回统一的定时服务图标与主题色。 */
+export function getSchedulerVisual(scheduler: ScheduleInfo): SchedulerVisual {
+  const schedulerId = (scheduler.id || '').toLocaleLowerCase()
+  const schedulerName = (scheduler.name || '').toLocaleLowerCase()
+  const schedulerProvider = (scheduler.provider || '').toLocaleLowerCase()
+  const matchedRule = schedulerVisualRules.find(rule => {
+    return (
+      hasSchedulerRuleMatch(rule.ids, schedulerId) ||
+      hasSchedulerRuleMatch(rule.names, schedulerName) ||
+      hasSchedulerRuleMatch(rule.providers, schedulerProvider)
+    )
+  })
+
+  return matchedRule ?? schedulerFallbackVisual
+}
--- a/src/views/dashboard/AnalyticsNetwork.vue
+++ b/src/views/dashboard/AnalyticsNetwork.vue
@@ -34,11 +34,11 @@ const variableTheme = controlledComputed(
 // 时间序列 - 上行和下行流量
 const series = ref([
  {
-    name: '上行流量',
+    name: t('dashboard.upload'),
    data: [0],
  },
  {
-    name: '下行流量',
+    name: t('dashboard.download'),
    data: [0],
  },
 ])
@@ -57,14 +57,27 @@ const animatedCurrentDownloadText = computed(
  () => `${formatDashboardFileSize(animatedCurrentDownload.value, 2, currentDownload.value)}/s`,
 )

+// 根据最近上、下行峰值自动选择图表刻度，低流量时仍保留可读的区域高度。
+const networkChartMax = computed(() => {
+  const peak = Math.max(...series.value.flatMap(item => item.data), currentUpload.value, currentDownload.value)
+  if (peak <= 0) return 1024
+
+  const unit = 1024 ** Math.max(0, Math.floor(Math.log(peak) / Math.log(1024)))
+
+  return Math.max(unit, Math.ceil(peak / unit) * unit)
+})
+
 const chartOptions = controlledComputed(
-  () => vuetifyTheme.name.value,
+  () => `${vuetifyTheme.name.value}:${networkChartMax.value}`,
  () => {
+    const axisLabelColor = `rgba(${hexToRgb(currentTheme.value['on-surface'])},${variableTheme.value['medium-emphasis-opacity']})`
+
    return {
      chart: {
        parentHeightOffset: 0,
        toolbar: { show: false },
        animations: { enabled: false },
+        foreColor: axisLabelColor,
      },
      tooltip: {
        enabled: false,
@@ -82,7 +95,7 @@ const chartOptions = controlledComputed(
        },
        padding: {
          top: -10,
-          left: -7,
+          left: 8,
          right: 5,
          bottom: 5,
        },
@@ -93,10 +106,13 @@ const chartOptions = controlledComputed(
        curve: 'smooth',
      },
      colors: [currentTheme.value.warning, currentTheme.value.info],
+      fill: {
+        opacity: [0.2, 0.12],
+      },
      markers: {
        size: 6,
        offsetY: 4,
-        offsetX: -2,
+        offsetX: 4,
        strokeWidth: 3,
        colors: ['transparent'],
        strokeColors: 'transparent',
@@ -116,20 +132,31 @@ const chartOptions = controlledComputed(
        ],
        hover: { size: 7 },
      },
+      dataLabels: {
+        enabled: false,
+      },
      xaxis: {
        labels: { show: false },
        axisTicks: { show: false },
        axisBorder: { show: false },
      },
      yaxis: {
-        labels: { show: false },
+        labels: {
+          show: true,
+          minWidth: 52,
+          formatter: (value: number) =>
+            `${formatDashboardFileSize(value, value >= 1024 ** 2 ? 1 : 0, networkChartMax.value)}/s`,
+          style: {
+            colors: axisLabelColor,
+            fontSize: '10px',
+          },
+        },
+        tickAmount: 2,
+        max: networkChartMax.value,
+        min: 0,
      },
      legend: {
-        show: true,
-        position: 'top',
-        horizontalAlign: 'left',
-        fontSize: '12px',
-        fontFamily: 'inherit',
+        show: false,
      },
    }
  },
@@ -175,21 +202,16 @@ useKeepAliveRefresh(refresh)
 <template>
  <VCard class="dashboard-chart-card dashboard-grid-fill">
    <VCardItem>
+      <template #prepend><VIcon icon="mdi-swap-vertical-bold" size="20" class="me-2" /></template>
      <VCardTitle>{{ t('dashboard.network') }}</VCardTitle>
    </VCardItem>
    <VCardText class="dashboard-chart-content">
      <div class="dashboard-chart-plot">
-        <VApexChart type="line" :options="chartOptions" :series="series" height="100%" />
+        <VApexChart type="area" :options="chartOptions" :series="series" height="100%" />
      </div>
-      <div class="d-flex justify-space-between">
-        <p class="dashboard-chart-value text-center font-weight-medium mb-0">
-          <span class="text-warning">{{ t('dashboard.upload') }}</span
-          >：{{ animatedCurrentUploadText }}
-        </p>
-        <p class="dashboard-chart-value text-center font-weight-medium mb-0">
-          <span class="text-info">{{ t('dashboard.download') }}</span
-          >：{{ animatedCurrentDownloadText }}
-        </p>
+      <div class="dashboard-chart-footer">
+        <span><i class="network-dot network-dot--upload" />{{ t('dashboard.upload') }} {{ animatedCurrentUploadText }}</span>
+        <span><i class="network-dot network-dot--download" />{{ t('dashboard.download') }} {{ animatedCurrentDownloadText }}</span>
      </div>
    </VCardText>
  </VCard>
@@ -200,7 +222,7 @@ useKeepAliveRefresh(refresh)
  display: flex;
  flex-direction: column;
  block-size: 100%;
-  min-block-size: 0;
+  min-block-size: 270px;
 }

 .dashboard-chart-content {
@@ -213,11 +235,34 @@ useKeepAliveRefresh(refresh)

 .dashboard-chart-plot {
  flex: 1 1 auto;
-  min-block-size: 0;
+  min-block-size: 120px;
 }

-.dashboard-chart-value {
+.dashboard-chart-footer {
+  display: flex;
+  justify-content: space-between;
+  border-block-start: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
+  color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity));
+  font-size: 0.68rem;
+  gap: 0.6rem;
  font-variant-numeric: tabular-nums;
+  padding-block-start: 0.55rem;
+}
+
+.network-dot {
+  display: inline-block;
+  border-radius: 50%;
+  block-size: 6px;
+  inline-size: 6px;
+  margin-inline-end: 0.3rem;
+}
+
+.network-dot--upload {
+  background: rgb(var(--v-theme-warning));
+}
+
+.network-dot--download {
+  background: rgb(var(--v-theme-info));
 }

 </style>
--- a/src/views/dashboard/AnalyticsScheduler.vue
+++ b/src/views/dashboard/AnalyticsScheduler.vue
@@ -5,6 +5,7 @@ import { useI18n } from 'vue-i18n'
 import { useBackground } from '@/composables/useBackground'
 import { SCHEDULER_SHORTCUT_ICON } from '@/composables/useShortcutTools'
 import { isScheduleRunning, useScheduleProgress } from '@/composables/useScheduleProgress'
+import { getSchedulerVisual } from '@/utils/schedulerVisual'

 // 国际化
 const { t } = useI18n()
@@ -43,14 +44,15 @@ const backgroundTasks = computed<BackgroundTaskItem[]>(() => {
  const waitingSchedulers = schedulerList.value.filter(item => !isScheduleRunning(item))
  const schedulerTasks = [...runningSchedulers, ...waitingSchedulers].map(item => {
    const isRunning = isScheduleRunning(item)
+    const visual = getSchedulerVisual(item)

    return {
      id: `schedule-${item.id}`,
      title: item.name || t('dashboard.scheduler'),
      subtitle: (isRunning && getScheduleProgressText(item)) || item.provider || item.next_run || '',
      status: item.status || t('dashboard.taskWaiting'),
-      icon: isRunning ? 'mdi-progress-clock' : 'mdi-clock-outline',
-      color: isRunning ? 'primary' : 'info',
+      icon: visual.icon,
+      color: visual.color,
      progress: isRunning ? getScheduleProgressValue(item) : undefined,
    }
  })
--- a/src/views/system/ServiceView.vue
+++ b/src/views/system/ServiceView.vue
@@ -5,20 +5,7 @@ import type { ScheduleInfo } from '@/api/types'
 import { useI18n } from 'vue-i18n'
 import { useBackground } from '@/composables/useBackground'
 import { isScheduleRunning, useScheduleProgress } from '@/composables/useScheduleProgress'
-
-// 移动端任务卡片视觉配置。
-type SchedulerMobileVisual = {
-  color: string
-  icon: string
-  rgb: string
-}
-
-// 已知定时服务的移动端视觉配置。
-type SchedulerMobileVisualRule = SchedulerMobileVisual & {
-  ids?: string[]
-  names?: string[]
-  providers?: string[]
-}
+import { getSchedulerVisual } from '@/utils/schedulerVisual'

 // 国际化
 const { t } = useI18n()
@@ -34,38 +21,6 @@ const { getScheduleProgressText, getScheduleProgressValue } = useScheduleProgres
  'scheduler-service-progress',
 )

-// 移动端任务图标按后端 job id 优先匹配，避免列表顺序变化导致图标看起来随机。
-const schedulerMobileVisualRules: SchedulerMobileVisualRule[] = [
-  { ids: ['cookiecloud'], names: ['CookieCloud'], icon: 'mdi-cloud-sync-outline', color: '#3f8cff', rgb: '63, 140, 255' },
-  { ids: ['mediaserver_sync'], names: ['媒体服务器'], icon: 'mdi-television-play', color: '#42c336', rgb: '66, 195, 54' },
-  { ids: ['new_subscribe_search', 'subscribe_search'], names: ['订阅搜索', '新增订阅搜索'], icon: 'mdi-magnify', color: '#e91e63', rgb: '233, 30, 99' },
-  { ids: ['subscribe_tmdb'], names: ['订阅元数据'], icon: 'mdi-database-search-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
-  { ids: ['subscribe_refresh'], names: ['订阅刷新'], icon: 'mdi-refresh', color: '#25b6c8', rgb: '37, 182, 200' },
-  { ids: ['subscribe_follow'], names: ['订阅分享'], icon: 'mdi-share-variant-outline', color: '#ff704d', rgb: '255, 112, 77' },
-  { ids: ['transfer'], names: ['下载文件整理', '文件整理'], icon: 'mdi-folder-move-outline', color: '#3f8cff', rgb: '63, 140, 255' },
-  { ids: ['random_wallpager'], names: ['壁纸'], icon: 'mdi-image-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
-  { ids: ['scheduler_job'], names: ['公共定时服务'], icon: 'mdi-clock-outline', color: '#42c336', rgb: '66, 195, 54' },
-  { ids: ['clear_cache'], names: ['缓存清理'], icon: 'mdi-delete-sweep-outline', color: '#ffad1f', rgb: '255, 173, 31' },
-  { ids: ['data_cleanup'], names: ['数据表清理'], icon: 'mdi-database-remove-outline', color: '#ff704d', rgb: '255, 112, 77' },
-  { ids: ['user_auth'], names: ['用户认证'], icon: 'mdi-account-check-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
-  { ids: ['sitedata_refresh'], names: ['站点数据'], icon: 'mdi-web-refresh', color: '#25b6c8', rgb: '37, 182, 200' },
-  { ids: ['recommend_refresh'], names: ['推荐缓存'], icon: 'mdi-star-outline', color: '#ffad1f', rgb: '255, 173, 31' },
-  { ids: ['plugin_market_refresh'], names: ['插件市场'], icon: 'mdi-puzzle-outline', color: '#ff704d', rgb: '255, 112, 77' },
-  { ids: ['subscribe_calendar_cache'], names: ['订阅日历'], icon: 'mdi-calendar-refresh-outline', color: '#3f8cff', rgb: '63, 140, 255' },
-  { ids: ['full_gc'], names: ['内存回收'], icon: 'mdi-memory', color: '#25b6c8', rgb: '37, 182, 200' },
-  { ids: ['agent_heartbeat'], names: ['智能体'], icon: 'mdi-robot-outline', color: '#9b6cf3', rgb: '155, 108, 243' },
-  { ids: ['usage_report'], names: ['统计上报'], icon: 'mdi-chart-line', color: '#42c336', rgb: '66, 195, 54' },
-  { ids: ['workflow'], providers: ['工作流'], icon: 'mdi-source-branch', color: '#3f8cff', rgb: '63, 140, 255' },
-  { ids: ['plugin'], icon: 'mdi-puzzle-outline', color: '#ff704d', rgb: '255, 112, 77' },
-]
-
-// 未知服务使用固定兜底视觉，避免用户误以为图标按列表顺序乱跳。
-const schedulerMobileFallbackVisual: SchedulerMobileVisual = {
-  icon: 'mdi-timer-cog-outline',
-  color: '#25b6c8',
-  rgb: '37, 182, 200',
-}
-
 /** 调用 API 加载定时服务列表。 */
 async function loadSchedulerList() {
  try {
@@ -105,29 +60,6 @@ function getSchedulerStatusVariant(status: string) {
  }
 }

-/** 判断规则列表是否命中指定文本。 */
-function hasSchedulerRuleMatch(values: string[] | undefined, target: string) {
-  if (!values?.length) return false
-
-  return values.some(value => target.includes(value.toLocaleLowerCase()))
-}
-
-/** 使用后端 job id、服务名和提供者为移动端任务卡片选择图标和主题色。 */
-function getMobileSchedulerVisual(scheduler: ScheduleInfo): SchedulerMobileVisual {
-  const schedulerId = (scheduler.id || '').toLocaleLowerCase()
-  const schedulerName = (scheduler.name || '').toLocaleLowerCase()
-  const schedulerProvider = (scheduler.provider || '').toLocaleLowerCase()
-  const matchedRule = schedulerMobileVisualRules.find(rule => {
-    const matchedId = hasSchedulerRuleMatch(rule.ids, schedulerId)
-    const matchedName = hasSchedulerRuleMatch(rule.names, schedulerName)
-    const matchedProvider = hasSchedulerRuleMatch(rule.providers, schedulerProvider)
-
-    return matchedId || matchedName || matchedProvider
-  })
-
-  return matchedRule ?? schedulerMobileFallbackVisual
-}
-
 /** 将后端返回的紧凑时间差转换为更适合移动端展示的文本。 */
 function formatMobileNextRunTime(nextRun?: string) {
  return nextRun?.trim() || ''
@@ -177,7 +109,7 @@ const mobileSchedulerCards = computed(() =>
      scheduler,
      statusText: getMobileSchedulerStatusText(scheduler),
      statusVariant: getSchedulerStatusVariant(scheduler.status),
-      visual: getMobileSchedulerVisual(scheduler),
+      visual: getSchedulerVisual(scheduler),
    }
  }),
 )