🌷 UI: alway set theme (#9458)

* 🌷 UI: alway set theme

* 🌷 UI: support dynamic theme

* merge master

.github/workflows/deploy.yml

@@ -15,7 +15,7 @@ jobs:
         run: yarn
 
       - name: plugins
-        run: yarn add umi-plugin-antd-theme umi-plugin-pro umi-plugin-setting-drawer
+        run: yarn add umi-plugin-pro
 
       - name: fetch-blocks
         run: yarn run pro fetch-blocks

config/config.ts

@@ -38,8 +38,7 @@ export default defineConfig({
   routes,
   // Theme for antd: https://ant.design/docs/react/customize-theme-cn
   theme: {
-    'primary-color': defaultSettings.primaryColor,
+    'root-entry-name': 'variable',
-    'root-entry-name': 'default',
   },
   // esbuild is father build tools
   // https://umijs.org/plugins/plugin-esbuild

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ant-design-pro",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "private": true,
   "description": "An out-of-box UI solution for enterprise applications",
   "scripts": {
@@ -57,10 +57,10 @@
     "@ant-design/icons": "^4.5.0",
     "@ant-design/pro-descriptions": "^1.9.0",
     "@ant-design/pro-form": "^1.43.0",
-    "@ant-design/pro-layout": "^6.26.0",
+    "@ant-design/pro-layout": "^6.32.0-beta.4",
     "@ant-design/pro-table": "^2.56.0",
-    "@umijs/route-utils": "^2.0.3",
+    "@umijs/route-utils": "^2.0.4",
-    "antd": "4.16.13",
+    "antd": "^4.17.0",
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
     "moment": "^2.25.3",

src/app.tsx

@@ -1,4 +1,5 @@
 import type { Settings as LayoutSettings } from '@ant-design/pro-layout';
+import { SettingDrawer } from '@ant-design/pro-layout';
 import { PageLoading } from '@ant-design/pro-layout';
 import type { RunTimeLayoutConfig } from 'umi';
 import { history, Link } from 'umi';
@@ -21,6 +22,7 @@ export const initialStateConfig = {
 export async function getInitialState(): Promise<{
   settings?: Partial<LayoutSettings>;
   currentUser?: API.CurrentUser;
+  loading?: boolean;
   fetchUserInfo?: () => Promise<API.CurrentUser | undefined>;
 }> {
   const fetchUserInfo = async () => {
@@ -48,7 +50,7 @@ export async function getInitialState(): Promise<{
 }
 
 // ProLayout 支持的api https://procomponents.ant.design/components/layout
-export const layout: RunTimeLayoutConfig = ({ initialState }) => {
+export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
   return {
     rightContentRender: () => <RightContent />,
     disableContentMargin: false,
@@ -79,10 +81,26 @@ export const layout: RunTimeLayoutConfig = ({ initialState }) => {
     // 自定义 403 页面
     // unAccessible: <div>unAccessible</div>,
     // 增加一个 loading 的状态
-    // childrenRender: (children) => {
+    childrenRender: (children, props) => {
-    //   if (initialState.loading) return <PageLoading />;
+      // if (initialState?.loading) return <PageLoading />;
-    //   return children;
+      return (
-    // },
+        <>
+          {children}
+          {!props.location?.pathname?.includes('/login') && (
+            <SettingDrawer
+              enableDarkTheme
+              settings={initialState?.settings}
+              onSettingChange={(settings) => {
+                setInitialState((preInitialState) => ({
+                  ...preInitialState,
+                  settings,
+                }));
+              }}
+            />
+          )}
+        </>
+      );
+    },
     ...initialState?.settings,
   };
 };

src/components/HeaderDropdown/index.less

@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import (reference) '~antd/es/style/themes/index';
 
 .container > * {
   background-color: @popover-bg;

src/components/HeaderSearch/index.less

@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import (reference) '~antd/es/style/themes/index';
 
 .headerSearch {
   display: inline-flex;

src/components/NoticeIcon/NoticeList.less

@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import (reference) '~antd/es/style/themes/index';
 
 .list {
   max-height: 400px;

src/components/NoticeIcon/index.less

@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import (reference) '~antd/es/style/themes/index';
 
 .popover {
   position: relative;

src/components/RightContent/index.less

@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import (reference) '~antd/es/style/themes/index';
 
 @pro-header-hover-bg: rgba(0, 0, 0, 0.025);
 

src/global.less

@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import '~antd/es/style/variable.less';
 
 html,
 body,

src/pages/Welcome.less

@@ -1,4 +1,4 @@
-@import '~antd/lib/style/themes/default.less';
+@import (reference) '~antd/es/style/themes/index';
 
 .pre {
   margin: 12px 0;

src/pages/Welcome.tsx

@@ -14,6 +14,7 @@ const CodePreview: React.FC = ({ children }) => (
 
 const Welcome: React.FC = () => {
   const intl = useIntl();
+
   return (
     <PageContainer>
       <Card>

src/pages/user/Login/index.less

@@ -1,4 +1,4 @@
-@import '~antd/es/style/themes/default.less';
+@import (reference) '~antd/es/style/themes/index';
 
 .container {
   display: flex;