From 4e389865b528f5dec0874448da28b65f048a3500 Mon Sep 17 00:00:00 2001
From: whyour <imwhyour@gmail.com>
Date: Sat, 3 Sep 2022 11:58:21 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=9A=E6=97=B6=E4=BB=BB=E5=8A=A1=E8=A7=86?=
 =?UTF-8?q?=E5=9B=BEtab=E9=AB=98=E4=BA=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/crontab/index.less | 20 ++++++++++++++++++++
 src/pages/crontab/index.tsx  | 19 ++++++++++++++++---
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/pages/crontab/index.less b/src/pages/crontab/index.less
index 747f55b1..881aefdd 100644
--- a/src/pages/crontab/index.less
+++ b/src/pages/crontab/index.less
@@ -124,6 +124,26 @@
         width: 50px;
       }
     }
+
+    &.active {
+      color: #1890ff;
+
+      .ant-tabs-ink-bar {
+        width: 50px;
+      }
+    }
+  }
+
+  &.more-active {
+    .ant-tabs-nav-list {
+      .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+        color: unset;
+      }
+
+      .ant-tabs-ink-bar {
+        width: 0 !important;
+      }
+    }
   }
 }
 
diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
index 32d6c397..36d08343 100644
--- a/src/pages/crontab/index.tsx
+++ b/src/pages/crontab/index.tsx
@@ -33,6 +33,7 @@ import {
   SettingOutlined,
   PlusOutlined,
   UnorderedListOutlined,
+  CheckOutlined,
 } from '@ant-design/icons';
 import config from '@/utils/config';
 import { PageContainer } from '@ant-design/pro-layout';
@@ -370,6 +371,7 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
     useState(false);
   const [cronViews, setCronViews] = useState<any[]>([]);
   const [enabledCronViews, setEnabledCronViews] = useState<any[]>([]);
+  const [moreMenuActive, setMoreMenuActive] = useState(false);
 
   const goToScriptManager = (record: any) => {
     const cmd = record.command.split(' ') as string[];
@@ -836,6 +838,10 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
     if (pageConf.page && pageConf.size) {
       getCrons();
     }
+    if (viewConf) {
+      const view = enabledCronViews.slice(2).find((x) => x.id === viewConf.id);
+      setMoreMenuActive(!!view);
+    }
   }, [pageConf, viewConf]);
 
   useEffect(() => {
@@ -965,7 +971,14 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
       }}
       items={[
         ...[...enabledCronViews].slice(2).map((x) => ({
-          label: x.name,
+          label: (
+            <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
+              <span>{x.name}</span>
+              {viewConf?.id === x.id && (
+                <CheckOutlined style={{ color: '#1890ff' }} />
+              )}
+            </Space>
+          ),
           key: x.id,
           icon: <UnorderedListOutlined />,
         })),
@@ -1031,14 +1044,14 @@ const Crontab = ({ headerStyle, isPhone, theme }: any) => {
         defaultActiveKey="all"
         size="small"
         tabPosition="top"
-        className="crontab-view"
+        className={`crontab-view ${moreMenuActive ? 'more-active' : ''}`}
         tabBarExtraContent={
           <Dropdown
             overlay={menu}
             trigger={['click']}
             overlayStyle={{ minWidth: 200 }}
           >
-            <div className="view-more">
+            <div className={`view-more ${moreMenuActive ? 'active' : ''}`}>
               <Space>
                 更多
                 <DownOutlined />