From c15ff897461625cde3dbd173acf332b994cf3c13 Mon Sep 17 00:00:00 2001
From: hanhh <18330117883@163.com>
Date: Tue, 21 Sep 2021 23:29:38 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E4=B8=BB=E9=A2=98=E5=88=87?=
 =?UTF-8?q?=E6=8D=A2=E5=85=A8=E5=B1=80class=E6=9C=AA=E5=8F=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .umirc.ts                   |  3 +++
 src/layouts/index.less      | 41 ++++++++++++++++++++++---------------
 src/layouts/index.tsx       | 23 +++++++++++++--------
 src/pages/crontab/index.tsx |  5 +++++
 src/pages/setting/index.tsx |  9 +++++++-
 5 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/.umirc.ts b/.umirc.ts
index 4c25a974..a81b18ba 100644
--- a/.umirc.ts
+++ b/.umirc.ts
@@ -7,6 +7,9 @@ export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
   },
+  // antd: {
+  //   dark: true
+  // },
   fastRefresh: {},
   favicon: '/images/g5.ico',
   proxy: {
diff --git a/src/layouts/index.less b/src/layouts/index.less
index fa5e63e8..a7827364 100644
--- a/src/layouts/index.less
+++ b/src/layouts/index.less
@@ -1,3 +1,4 @@
+@import '~antd/lib/style/themes/default.less';
 @import '~@/styles/variable.less';
 @import '~codemirror/lib/codemirror.css';
 
@@ -8,12 +9,12 @@
     url('../assets/fonts/SourceCodePro-Regular.ttf') format('truetype');
 }
 
-body {
-  height: 100%;
-  overflow-y: hidden;
-  background-color: rgb(248, 248, 248);
-  width: 100% !important;
-}
+// body {
+//   height: 100%;
+//   overflow-y: hidden;
+//   // background-color: rgb(248, 248, 248);
+//   width: 100% !important;
+// }
 
 .log-modal {
   .ant-modal {
@@ -120,16 +121,6 @@ body {
   }
 }
 
-input:-webkit-autofill,
-input:-webkit-autofill:hover,
-input:-webkit-autofill:focus,
-input:-webkit-autofill:active {
-  transition-delay: 99999s;
-  transition: color 99999s ease-out, background-color 99999s ease-out;
-  -webkit-transition-delay: 99999s;
-  -webkit-transition: color 99999s ease-out, background-color 99999s ease-out;
-}
-
 .ant-pro-page-container.ql-container-wrapper {
   display: flex;
   flex-direction: column;
@@ -236,7 +227,23 @@ input:-webkit-autofill:active {
   font-size: 13px;
 }
 
-.dark {
+[data-dark='true'] {
+  /* Change autocomplete styles in WebKit */
+  input:-webkit-autofill,
+  input:-webkit-autofill:hover,
+  input:-webkit-autofill:focus,
+  textarea:-webkit-autofill,
+  textarea:-webkit-autofill:hover,
+  textarea:-webkit-autofill:focus,
+  select:-webkit-autofill,
+  select:-webkit-autofill:hover,
+  select:-webkit-autofill:focus {
+    border: 1px solid @border-color-base;
+    box-shadow: none;
+    transition: background-color 5000s ease-in-out 0s;
+    -webkit-text-fill-color: @text-color;
+  }
+
   ::placeholder {
     opacity: 0.5 !important;
   }
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
index 2e1f4c88..f099de70 100644
--- a/src/layouts/index.tsx
+++ b/src/layouts/index.tsx
@@ -50,6 +50,18 @@ export default function (props: any) {
     getUser(false);
   };
 
+  const setTheme = () => {
+    const media = window.matchMedia('(prefers-color-scheme: dark)');
+    const storageTheme = localStorage.getItem('qinglong_dark_theme');
+    const isDark =
+      (media.matches && storageTheme !== 'light') || storageTheme === 'dark';
+    if (isDark) {
+      document.body.setAttribute('data-dark', 'true');
+    } else {
+      document.body.setAttribute('data-dark', 'false');
+    }
+  };
+
   useEffect(() => {
     const isAuth = localStorage.getItem(config.authKey);
     if (!isAuth) {
@@ -65,14 +77,8 @@ export default function (props: any) {
   }, [props.location.pathname]);
 
   useEffect(() => {
-    if (theme && theme.theme) {
-      if (theme.theme === 'vs-dark') {
-        document.body.classList.add('dark');
-      } else {
-        document.body.classList.add('white');
-      }
-    }
-  }, [theme]);
+    setTheme();
+  }, [theme.theme]);
 
   useEffect(() => {
     const _theme = localStorage.getItem('qinglong_dark_theme') || 'auto';
@@ -155,6 +161,7 @@ export default function (props: any) {
           ...theme,
           user,
           reloadUser,
+          reloadTheme: setTheme,
         });
       })}
     </ProLayout>
diff --git a/src/pages/crontab/index.tsx b/src/pages/crontab/index.tsx
index dd49a11f..3119dfcc 100644
--- a/src/pages/crontab/index.tsx
+++ b/src/pages/crontab/index.tsx
@@ -672,6 +672,10 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
     localStorage.setItem('pageSize', pageSize + '');
   };
 
+  const getRowClassName = (record: any, index: number) => {
+    return record.isPinned ? 'pinned-cron' : '';
+  };
+
   useEffect(() => {
     if (logCron) {
       localStorage.setItem('logCron', logCron._id);
@@ -773,6 +777,7 @@ const Crontab = ({ headerStyle, isPhone }: any) => {
         scroll={{ x: 768 }}
         loading={loading}
         rowSelection={rowSelection}
+        rowClassName={getRowClassName}
       />
       <CronLogModal
         visible={isLogModalVisible}
diff --git a/src/pages/setting/index.tsx b/src/pages/setting/index.tsx
index a5198cba..fc77bd66 100644
--- a/src/pages/setting/index.tsx
+++ b/src/pages/setting/index.tsx
@@ -39,7 +39,13 @@ const optionsWithDisabled = [
   { label: '跟随系统', value: 'auto' },
 ];
 
-const Setting = ({ headerStyle, isPhone, user, reloadUser }: any) => {
+const Setting = ({
+  headerStyle,
+  isPhone,
+  user,
+  reloadUser,
+  reloadTheme,
+}: any) => {
   const columns = [
     {
       title: '名称',
@@ -265,6 +271,7 @@ const Setting = ({ headerStyle, isPhone, user, reloadUser }: any) => {
     } else {
       followSystemColorScheme({});
     }
+    reloadTheme(theme);
   }, [theme]);
 
   return (