修复主题切换全局class未变化

.umirc.ts

@@ -7,6 +7,9 @@ export default defineConfig({
   nodeModulesTransform: {
     type: 'none',
   },
+  // antd: {
+  //   dark: true
+  // },
   fastRefresh: {},
   favicon: '/images/g5.ico',
   proxy: {

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 {
+// body {
-  height: 100%;
+//   height: 100%;
-  overflow-y: hidden;
+//   overflow-y: hidden;
-  background-color: rgb(248, 248, 248);
+//   // background-color: rgb(248, 248, 248);
-  width: 100% !important;
+//   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;
   }

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) {
+    setTheme();
-      if (theme.theme === 'vs-dark') {
+  }, [theme.theme]);
-        document.body.classList.add('dark');
-      } else {
-        document.body.classList.add('white');
-      }
-    }
-  }, [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>

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}

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 (