From 8d6140ff28efbcd67d5931c55e8c96135d0cda6d Mon Sep 17 00:00:00 2001
From: dhb52 <dhb52@126.com>
Date: Sun, 2 Jun 2024 17:42:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=A1=E7=89=87=E5=8F=AF=E4=BB=A5?=
=?UTF-8?q?=E8=B7=B3=E8=BD=AC=E5=88=B0=E4=BB=BB=E5=8A=A1=E7=AE=A1=E7=90=86?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/locales/langs/zh-cn.ts | 2 +-
src/views/home/modules/card-data.vue | 29 +++++++++++++++-------------
2 files changed, 17 insertions(+), 14 deletions(-)
diff --git a/src/locales/langs/zh-cn.ts b/src/locales/langs/zh-cn.ts
index 08f1ca5..fcef8f2 100644
--- a/src/locales/langs/zh-cn.ts
+++ b/src/locales/langs/zh-cn.ts
@@ -305,7 +305,7 @@ const local: App.I18n.Schema = {
notify_recipient: '通知人',
notify_scene: '通知场景',
retry: '重试任务',
- retry_task: '重试任务',
+ retry_task: '任务管理',
'retry_dead-letter': '死信任务',
user: '用户管理',
user_manager: '用户信息',
diff --git a/src/views/home/modules/card-data.vue b/src/views/home/modules/card-data.vue
index dea519c..ce24322 100644
--- a/src/views/home/modules/card-data.vue
+++ b/src/views/home/modules/card-data.vue
@@ -1,13 +1,14 @@
<script setup lang="ts">
import { computed, nextTick, onUnmounted, reactive } from 'vue';
import { createReusableTemplate } from '@vueuse/core';
-import { useRouter } from 'vue-router';
import { getPaletteColorByNumber } from '@sa/color';
import { $t } from '@/locales';
import { useThemeStore } from '@/store/modules/theme';
+import { useRouterPush } from '@/hooks/common/router';
import DardRetryChart from './card-retry-chart.vue';
-const router = useRouter();
+const { routerPushByKey } = useRouterPush();
+
const themeStore = useThemeStore();
defineOptions({
@@ -76,8 +77,11 @@ const props = withDefaults(defineProps<Props>(), {
})
});
+/** 卡片 key 类型, 与卡片的路由的 name 一致, 便于直接使用 routerPushByKey */
+type KeyType = 'job_task' | 'retry_task' | 'workflow_task' | 'pods';
+
interface CardData {
- key: string;
+ key: KeyType;
title: string;
tip: string;
value: number;
@@ -92,7 +96,7 @@ interface CardData {
// eslint-disable-next-line complexity
const cardData = computed<CardData[]>(() => [
{
- key: 'jobTask',
+ key: 'job_task',
title: $t('page.home.jobTask'),
tip: $t('page.home.jobTaskTip'),
value: props.modelValue?.jobTask.totalNum ?? 0,
@@ -121,7 +125,7 @@ const cardData = computed<CardData[]>(() => [
]
},
{
- key: 'retryTask',
+ key: 'retry_task',
title: $t('page.home.retryTask'),
tip: $t('page.home.retryTaskTip'),
value: props.modelValue?.retryTask.totalNum ?? 0,
@@ -151,7 +155,7 @@ const cardData = computed<CardData[]>(() => [
]
},
{
- key: 'workflow',
+ key: 'workflow_task',
title: $t('page.home.workflow'),
tip: $t('page.home.workflowTip'),
value: props.modelValue?.workFlowTask.totalNum,
@@ -181,7 +185,7 @@ const cardData = computed<CardData[]>(() => [
]
},
{
- key: 'onlineServiceCount',
+ key: 'pods',
title: $t('page.home.onlineServiceCount'),
tip: $t('page.home.onlineServiceTip'),
value: props.modelValue?.onLineService.total ?? 0,
@@ -232,9 +236,8 @@ function getGradientColor(color: CardData['color']) {
<NSpin :show="false">
<GradientBg
:gradient-color="getGradientColor(item.color)"
- class="h-165px flex-1"
- :class="item.key === 'onlineServiceCount' ? 'cursor-pointer' : ''"
- @click="() => (item.key === 'onlineServiceCount' ? router.push('pods') : null)"
+ class="h-165px flex-1 cursor-pointer"
+ @click="routerPushByKey(item.key)"
>
<div class="flex justify-between">
<div class="align-center flex">
@@ -254,7 +257,7 @@ function getGradientColor(color: CardData['color']) {
<CountTo :start-value="0" :end-value="item.value" class="text-30px text-white" />
</div>
<NProgress
- v-if="item.key === 'jobTask'"
+ v-if="item.key === 'job_task'"
class="mb-24px h-20px pt-18px"
type="line"
color="#728bf9"
@@ -263,7 +266,7 @@ function getGradientColor(color: CardData['color']) {
indicator-text-color="#fff"
/>
<NProgress
- v-else-if="item.key === 'workflow'"
+ v-else-if="item.key === 'workflow_task'"
class="mb-24px h-20px pt-18px"
type="line"
color="#728bf9"
@@ -271,7 +274,7 @@ function getGradientColor(color: CardData['color']) {
:percentage="props.modelValue?.workFlowTask.successRate ?? 0"
indicator-text-color="#fff"
/>
- <DardRetryChart v-else-if="item.key === 'retryTask'" :model-value="props.modelValue?.retryTaskBarList" />
+ <DardRetryChart v-else-if="item.key === 'retry_task'" :model-value="props.modelValue?.retryTaskBarList" />
<div v-else class="mb-12px h-32px"></div>
<NDivider />
<template v-for="(bottomItem, bottomIndex) in item.bottom" :key="bottomIndex">