feat:添加动态主题配置

config/config.ts

@@ -54,7 +54,7 @@ export default defineConfig({
   },
   // icon
   // favicon: '',
-  hash: false,
+  hash: true,
   /**
    * 会自动添加到网页html的顶部
    */
@@ -71,5 +71,5 @@ export default defineConfig({
    * https://umijs.org/zh-CN/config#theme
    * 配置主题，实际上是配 less 变量。
    */
-  theme,
+  // theme,
 });

config/shopRoutes/index.ts

@@ -8,7 +8,7 @@ const shopRoute = {
       path: `/`,
       name: 'home',
       key: 'home',
-      component: '@/pages/index',
+      component: '@/pages/shopCenter/index',
     },
     {
       // 资讯

config/theme.config.json

+{
+  "theme": [
+    {
+      "fileName": "theme1.css",
+      "key": "theme1",
+      "modifyVars": {
+        "@primary-color": "#00B37A",
+        "@layout-header-background": "#FFF"
+      }
+    },
+    {
+      "fileName": "theme2.css",
+      "key": "theme2",
+      "modifyVars": {
+        "@primary-color": "#4992BF",
+        "@layout-header-background": "#FFF"
+      }
+    }
+  ],
+  "min": true,
+  "isModule": true,
+  "ignoreAntd": false,
+  "ignoreProLayout": false,
+  "cache": true
+}
\ No newline at end of file

package.json

@@ -50,6 +50,7 @@
     "fs-extra": "^9.0.1",
     "gulp": "^4.0.2",
     "json2ts": "^0.0.7",
-    "ora": "^4.0.4"
+    "ora": "^4.0.4",
+    "umi-plugin-antd-theme": "^2.1.2"
   }
 }

src/global/styles/global.less

-
 /********************************** 布局 ******************************************/
 @import './mixins/layout.less';
+@import './index.less';
+@import '../../theme/style/colors.less';
 
 @makeCenters: text, block, flex, flexAlign, flexJustify, absolute, fixed, margin;
 @makeCentersLen: length(@makeCenters);
@@ -9,14 +10,23 @@
   .center-@{val} {
     .make-center(@val);
   }
+
   .loopCenter(@list, @i + 1)
-};
+}
+
+;
 .loopCenter(@makeCenters);
 
 // antd default
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   color: #6B778C;
 }
+
 .@{prefix}-margin_content {
   .center-margin;
   width: 1190px;
@@ -31,6 +41,7 @@ h1, h2, h3, h4, h5, h6 {
 .commonPanelTitle {
   padding-left: 8px;
   position: relative;
+
   &::before {
     content: "";
     display: inline-block;
@@ -41,7 +52,7 @@ h1, h2, h3, h4, h5, h6 {
     width: 2px;
     height: .85333rem;
     background-color: @primary-color;
-    box-shadow: 0 0.14933rem 0.256rem 0 rgba(97,144,232,.2);
+    box-shadow: 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
     border-radius: 1px;
   }
 }
@@ -50,46 +61,55 @@ h1, h2, h3, h4, h5, h6 {
 .commonShowBlock {
   display: block;
 }
+
 .commonShow {
   display: inline-block;
 }
+
 .commonHide {
   display: none;
 }
+
 // 公共着色 主体颜色
-.commonPickColor{
+.commonPickColor {
   color: @main-color;
 }
+
 // 公共状态 圆点
 .commonStatus {
   display: inline-block;
-  width:8px;
-  height:8px;
+  width: 8px;
+  height: 8px;
   margin-right: 6px;
   border-radius: 50%;
   vertical-align: middle;
 }
-.commonStatusStop{
+
+.commonStatusStop {
   .commonStatus();
-  background-color: @status-stop;  // 停用
+  background-color: @status-stop; // 停用
 }
-.commonStatusModify{
+
+.commonStatusModify {
   .commonStatus();
-  background-color: @status-modify;  // 已修改
+  background-color: @status-modify; // 已修改
 }
-.commonStatusValid{
+
+.commonStatusValid {
   .commonStatus();
-  background-color: @status-valid;  // 有效、已生成
+  background-color: @status-valid; // 有效、已生成
 }
-.commonStatusInvalid{
+
+.commonStatusInvalid {
   .commonStatus();
-  background-color: @status-invalid;  // 无效、未生成
+  background-color: @status-invalid; // 无效、未生成
 }
 
 
-.mb-30{
+.mb-30 {
   margin-bottom: 30px;
 }
+
 .sc-fzpans {
   display: block;
   width: 100%;

src/global/styles/index.less

+@primary-color: #00B37A;
+
+// 公共padding变量
+@padding-lg: 24px;
+@padding-sm: 12px;
+@padding-xs: 8px;
+@padding-xss: 4px;
+
+// 公共margin变量
+@margin-lg: 24px;
+@margin-md: 16px;
+@margin-sm: 12px;
+@margin-xs: 8px;
+@margin-xss: 4px;
\ No newline at end of file

src/global/styles/theme.less

@@ -19,11 +19,11 @@
 // layout
 @header-global-nav-bg: #38414A;
 @menu-select-color: rgba(0, 0, 0, 0.85);
-@menu-select-bg: rgba(0,0,0,.02);
+@menu-select-bg: rgba(0, 0, 0, .02);
 @menu-circle-color: #D8DEE4;
 
 // status circle color
-@status-stop: #C1C7D0;  // 停用
-@status-modify: #669EDE;  //已修改
-@status-valid: #41CC9E;  // 已生成，有效
+@status-stop: #C1C7D0; // 停用
+@status-modify: #669EDE; //已修改
+@status-valid: #41CC9E; // 已生成，有效
 @status-invalid: #FFC400; // 未生成，无效
\ No newline at end of file

src/layouts/BasicLayout.tsx

@@ -46,6 +46,23 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     settings,
     location,
   } = props;
+  console.log(props)
+
+  const defaultSetting: Settings = {
+    navTheme: 'dark',
+    // 拂晓蓝
+    primaryColor: '#1890ff',
+    layout: 'topmenu',
+    contentWidth: 'Fluid',
+    fixedHeader: false,
+    fixSiderbar: true,
+    colorWeak: false,
+    menu: {
+      locale: true,
+    },
+    title: 'Ant Design Pro',
+    iconfontUrl: '',
+  };
   const [openKeys, setOpenKeys] = useState<string[]>([])
   const [collapsed, setCollapsed] = useState(false)
 

src/layouts/components/MenuSlider.tsx

@@ -5,7 +5,7 @@ import {
   BorderOutlined,
 } from '@ant-design/icons'
 import OuterSider from './OuterSide'
-import '../styles/MenuSlider.less'
+import styles from '../styles/MenuSlider.less'
 
 const { Sider } = Layout
 const { SubMenu } = Menu;
@@ -46,7 +46,7 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
           )
         }
         return (
-          <Menu.Item key={item.path} className={hasChildren ? "menuItem" : ""}>
+          <Menu.Item key={item.path} className={hasChildren ? styles.menuItem : ""}>
             {
               hasChildren && <BorderOutlined rotate={45} style={{ fontSize: 6, verticalAlign: 'middle' }} />
             }
@@ -72,12 +72,12 @@ const MenuSlider: React.FC<MenuSliderProps> = (props) => {
   return <>
     <OuterSider {...props} />
     <Sider theme="light" collapsed={props.collapseState}>
-      <div className="logo">LOGOLOGOGOG</div>
-      <div className="menuTitle">
+      <div className={styles.logo}>LOGOLOGOGOG</div>
+      <div className={styles.menuTitle}>
         {menuRouter?.name}
       </div>
       <Menu
-        className="menuSlider"
+        className={styles.menuSlider}
         onOpenChange={handleOpenchange}
         selectedKeys={currentSelectKey}
         openKeys={openKeys}

src/layouts/components/OuterSide.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Layout, Menu } from 'antd'
 import { AppstoreOutlined } from '@ant-design/icons'
 import { Link } from 'umi'
-import '../styles/MenuSlider.less'
+import styles from '../styles/MenuSlider.less'
 
 const { Sider } = Layout
 
@@ -33,12 +33,12 @@ const OuterSider: React.FC<OuterSiderProps> = (props) => {
 
   const siderMunu = getSubMenu()
   return <>
-    <Sider collapsed={true} collapsedWidth={64} className="wrapperSilder">
-      <div className="userPic" />
-      <ul className="menuBox">
+    <Sider collapsed={true} collapsedWidth={64} className={styles.wrapperSilder}>
+      <div className={styles.userPic} />
+      <ul className={styles.menuBox}>
         {
           siderMunu.map(item => (
-            <li key={item.key} className={defaultSelectedKeys === item.key ? "currentItem" : ''}>
+            <li key={item.key} className={defaultSelectedKeys === item.key ? styles.currentItem : ''}>
               <Link to={item.path}>
                 <AppstoreOutlined />
                 <label>{item.title}</label>

src/pages/shopCenter/index/index.less

+.title {
+
+  color: var(--font-color);
+}
\ No newline at end of file

src/pages/shopCenter/index/index.tsx

+import React from 'react'
+import { SettingDrawer } from '@ant-design/pro-layout'
+import { Link } from 'umi'
+import { Button } from 'antd'
+import styles from './index.less'
+
+const ShopCenterIndex: React.FC = () => {
+
+  return (
+    <div>
+      <p className={styles.title}>ShopCenterIndex</p>
+      <Button type="primary">TEST</Button>
+      <div>
+        <Link to="/memberCenter/home">会员中心</Link>
+      </div>
+      <SettingDrawer />
+    </div>
+  )
+}
+
+export default ShopCenterIndex

src/pages/user/index.less

@@ -8,86 +8,104 @@
   position: relative;
   background: @white;
 }
+
 .loginWrap {
   padding: 141px 0 102px;
 }
+
 .loginMain {
   position: relative;
   background: @white;
   padding: 64px 56px 0;
   color: #6B778C;
+
   &>h2 {
     font-size: 32px;
     margin-bottom: 32px;
   }
-  .clickUsernameLogin{
+
+  .clickUsernameLogin {
     .ab-position(right, top, 8, 8);
-    font-size:14px;
-    color:rgba(107,119,140,1);
+    font-size: 14px;
+    color: rgba(107, 119, 140, 1);
   }
-  .clickScanLogin{
-    .center-text();
+
+  .clickScanLogin {
+    // .center-text();
     .ab-position(right, top, 8, 8);
     width: 32px;
     height: 32px;
     background: url("../../../mockStatic/qr_code1.png") center center no-repeat;
     background-size: cover;
-    &:hover{
+
+    &:hover {
       background: url("../../../mockStatic/qr_code2.png") center center no-repeat;
     }
   }
-  .scanTips{
+
+  .scanTips {
     .make-center(flex);
-    font-size:12px;
-    color:rgba(107,119,140,1);
-    .scanIcon{
+    font-size: 12px;
+    color: rgba(107, 119, 140, 1);
+
+    .scanIcon {
       font-size: 30px;
       margin-right: @margin-sm;
     }
   }
 }
+
 .loginDesc {
   background: url("../../../mockStatic/image_ad.png") center center no-repeat;
   background-size: cover;
-  .adBox{
+
+  .adBox {
     color: @white;
     .make-center(text);
-    & h2{
+
+    & h2 {
       margin-top: 20px;
       .font-height-color(32, 80, @white);
-      letter-spacing:2px;
+      letter-spacing: 2px;
     }
-    & p{
+
+    & p {
       padding: 10px 60px;
       text-indent: 2em;
     }
   }
 }
+
 .thirdLogin {
   height: 64px;
   background: #FAFBFC;
   margin-top: 90px;
-  & a{
+
+  & a {
     margin-left: 6px;
     .make-center(text);
     vertical-align: middle;
   }
 }
+
 .loginVerBtn {
   background: #EBF7F2;
 }
 
-.scanLoginWrap{
+.scanLoginWrap {
   .make-center(text);
-  &>h2{
+
+  &>h2 {
     color: #6B778C;
   }
-  .qrCodeImage{
+
+  .qrCodeImage {
     .make-center(text);
     width: 224px;
     height: 224px;
     .make-center-space(margin, 30, 18);
-    &>img{
+
+    &>img {
       .make-center(block);
       width: 100%;
       height: 100%;
@@ -99,6 +117,7 @@
 
 // register
 .register {
+
   // width: 100%;
   &>h3 {
     padding: 40px 0;
@@ -107,6 +126,7 @@
     margin-bottom: 0;
   }
 }
+
 .registerForm {
   max-width: 335px;
   margin: 40px auto;
@@ -139,25 +159,30 @@
   border: 1px solid #DFE1E6;
   border-right: 0;
 }
-.formBoxStep2{
+
+.formBoxStep2 {
   width: 704px;
   .make-center(margin);
-  & h3{
+
+  & h3 {
     margin-top: 48px;
   }
 }
-.continueButton{
+
+.continueButton {
   .make-center(block);
   width: 340px;
   height: 40px;
   .make-center-space(margin, 8);
 }
-.identityRadio{
+
+.identityRadio {
   display: flex;
   flex-direction: column;
   margin: 0 auto;
   .make-center(text);
-  & label{
+
+  & label {
     width: 320px;
     height: 48px;
     .make-center-space(margin, 12);
@@ -165,46 +190,55 @@
     line-height: 48px;
   }
 }
-.businessRadio{
+
+.businessRadio {
   display: flex;
   flex-wrap: wrap;
   width: 320px;
   .make-center(margin);
   .make-center(text);
-  & label{
+
+  & label {
     width: 148px;
     height: 32px;
     line-height: 32px;
     margin: 8px 0;
   }
+
   & label:nth-child(odd) {
     margin-right: 24px;
   }
 }
 
-.formBoxStep3{
+.formBoxStep3 {
   width: 704px;
   .make-center(margin);
   .make-center(text);
-  & .description{
+
+  & .description {
     margin-bottom: 40px;
-    & p{
+
+    & p {
       .font-height-color(14, 20, #42526e);
     }
   }
-  &.guid{
+
+  &.guid {
     .font-height-color(14, 22, #6b778c);
   }
-  & h2{
-    font-size:24px;
-    color:rgba(23,43,77,1);
+
+  & h2 {
+    font-size: 24px;
+    color: rgba(23, 43, 77, 1);
     margin: 24px 0;
   }
-  & img{
+
+  & img {
     display: block;
     .make-center(margin);
   }
 }
+
 .agreement {
   font-size: 12px;
 }
@@ -213,11 +247,13 @@
   width: 702px;
   .make-center(margin);
 }
+
 .margin320 {
   width: 320px;
   .make-center(margin);
   display: block;
 }
+
 .default {
   width: 148px;
   margin-right: 24px;
@@ -225,10 +261,12 @@
   .make-center(text);
   height: 32px;
   line-height: 32px;
+
   &:nth-child(2n) {
     margin-right: 0;
   }
 }
+
 .large {
   width: 320px;
   margin-bottom: 24px;
@@ -250,12 +288,15 @@
     .make-center(text);
     .font-height-color(24, 120, #172B4D);
   }
-  .getBackForm{
+
+  .getBackForm {
     background-color: @white;
-    .formBox{
+
+    .formBox {
       width: 320px;
-      .make-center-space(margin,40,40);
-      .back{
+      .make-center-space(margin, 40, 40);
+
+      .back {
         width: 100%;
         .make-center(block);
         .make-center(text);
@@ -266,26 +307,30 @@
 }
 
 // policy
-.policyBox{
+.policyBox {
   width: 100%;
   // height: 100vh;
   background-color: #fff;
-  &>h1{
+
+  &>h1 {
     .font-height-color(24, 96, #172B4D, #F4F5F7);
     .make-center(text)
   }
-  & article{
+
+  & article {
     padding-bottom: 200px;
-    h4{
-      width:96px;
+
+    h4 {
+      width: 96px;
       .font-height-color(16, 48, #172b4d);
-      font-weight:500;
+      font-weight: 500;
       margin-top: 24px;
     }
-    p{
-      font-size:14px;
-      color:rgba(66,82,110,1);
-      line-height:22px;
+
+    p {
+      font-size: 14px;
+      color: rgba(66, 82, 110, 1);
+      line-height: 22px;
     }
   }
 }

src/store/theme/index.ts

@@ -2,7 +2,7 @@ import { observable } from 'mobx'
 import { IThemeModule } from '@/types/ThemeStoreType'
 
 class ThemeStore implements IThemeModule {
-  @observable public themeName: string = 'default';
+  @observable public themeName: string = 'theme1';
 
 }
 

src/theme/style/colors.less

+.body-wrap-theme1 {
+  // theme1下的全局变量在此定义
+  --font-color: red;
+  --bg-color: #011313;
+}
+
+.body-wrap-theme2 {
+  // theme2下的全局变量在此定义
+  --font-color: cyan;
+  --bg-color: #ffffff;
+}

src/wrappers/getSiteConfig.tsx

@@ -21,7 +21,15 @@ const GetSiteConfig: React.FC<AuthComponentPropsType> = (props) => {
     setTimeout(() => {
       setLoading(false)
       console.log('当前使用模板', themeName)
-      document.body.className = `theme-${themeName}`;
+      // document.body.className = `theme-${themeName}`;
+      let body = document.getElementsByTagName('body')[0];
+      let styleLink = document.createElement('link');
+      styleLink.type = 'text/css';
+      styleLink.rel = 'stylesheet';
+      styleLink.id = 'theme-style';
+      styleLink.href = `/theme/${themeName}.css`;
+      body.className = `body-wrap-${themeName}`;
+      document.body.append(styleLink);
     }, 100);
 
   }, [])