From b063ccdac4497130f8f52484fa137f3ca303aa0d Mon Sep 17 00:00:00 2001
From: Zzm0809 <934230207@qq.com>
Date: Wed, 20 Dec 2023 23:04:32 +0800
Subject: [PATCH] support-devops-card-checkstyle

---
 .../JobList/components/Overview/StatisticsCard.tsx       | 9 +++++++--
 .../pages/DevOps/JobList/components/Overview/index.tsx   | 7 +++++++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/dinky-web/src/pages/DevOps/JobList/components/Overview/StatisticsCard.tsx b/dinky-web/src/pages/DevOps/JobList/components/Overview/StatisticsCard.tsx
index 18374e17a1..685eb4086f 100644
--- a/dinky-web/src/pages/DevOps/JobList/components/Overview/StatisticsCard.tsx
+++ b/dinky-web/src/pages/DevOps/JobList/components/Overview/StatisticsCard.tsx
@@ -30,12 +30,17 @@ type StatisticsCardParams = {
   extra?: any;
   divider?: boolean;
   atClick?: () => void;
+  isChecked?: boolean;  // 是否选中
 };
 const StatisticsCard = (props: StatisticsCardParams) => {
-  const { title, value, icon, extra = <></>, divider = true, link, atClick } = props;
+  const { title, value,isChecked= false, icon, extra = <></>, divider = true, link, atClick } = props;
   return (
     <>
-      <ProCard layout={'center'} onClick={() => (atClick ? atClick() : {})} hoverable={true}>
+      <ProCard
+        checked={isChecked} boxShadow={isChecked}
+        layout={'center'} onClick={() => (atClick ? atClick() : {})}
+        hoverable={true}
+      >
         <Space size={20}>
           {icon}
           <Space direction='vertical'>
diff --git a/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx b/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
index f012a719c9..ecc9530983 100644
--- a/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
+++ b/dinky-web/src/pages/DevOps/JobList/components/Overview/index.tsx
@@ -63,6 +63,7 @@ const JobOverview = (props: any) => {
             atClick={() => {
               setStatusFilter(undefined);
             }}
+            isChecked={!statusFilter}
             extra={
               <Space direction='vertical'>
                 <Button type={'text'} icon={<BatchIcons size={20} />}>
@@ -85,6 +86,7 @@ const JobOverview = (props: any) => {
             atClick={() => {
               setStatusFilter(JOB_STATUS.RUNNING);
             }}
+            isChecked={statusFilter === JOB_STATUS.RUNNING}
           />
           <StatisticsCard
             title={l('devops.joblist.status.cancelled')}
@@ -93,6 +95,7 @@ const JobOverview = (props: any) => {
             atClick={() => {
               setStatusFilter(JOB_STATUS.CANCELED);
             }}
+            isChecked={statusFilter === JOB_STATUS.CANCELED}
           />
           <StatisticsCard
             title={l('devops.joblist.status.failed')}
@@ -101,6 +104,7 @@ const JobOverview = (props: any) => {
             atClick={() => {
               setStatusFilter(JOB_STATUS.FAILED);
             }}
+            isChecked={statusFilter === JOB_STATUS.FAILED}
           />
           <StatisticsCard
             title={l('devops.joblist.status.restarting')}
@@ -109,6 +113,7 @@ const JobOverview = (props: any) => {
             atClick={() => {
               setStatusFilter(JOB_STATUS.RESTARTING);
             }}
+            isChecked={statusFilter === JOB_STATUS.RESTARTING}
           />
           <StatisticsCard
             title={l('devops.joblist.status.finished')}
@@ -117,6 +122,7 @@ const JobOverview = (props: any) => {
             atClick={() => {
               setStatusFilter(JOB_STATUS.FINISHED);
             }}
+            isChecked={statusFilter === JOB_STATUS.FINISHED}
           />
           <StatisticsCard
             title={l('devops.joblist.status.unknown')}
@@ -126,6 +132,7 @@ const JobOverview = (props: any) => {
             atClick={() => {
               setStatusFilter(JOB_STATUS.UNKNOWN);
             }}
+            isChecked={statusFilter === JOB_STATUS.UNKNOWN}
           />
         </ProCard>
       </Col>