merge

README.md

@@ -23,3 +23,5 @@
 
 1. 样式
   - 全局样式需写在src/global/global.less下， 涉及到color， size之类的属性尽量变量化 并且储存在/styles/theme.less中
+
+ "umi-plugin-antd-theme": "^2.1.2"
\ No newline at end of file

config/config.ts

 import { defineConfig } from 'umi';
 import routes from './router'
 import proxy from './proxy'
-import theme from './theme.config'
+import theme from './lingxi.theme.config'
 
-export default defineConfig({
+const OPEN_THEME_BUILD = false // 是否开启动态主题
+
+const config:any = {
   title: '瓴犀开放平台',
   // layout: {},
   antd: {},
@@ -34,7 +36,7 @@ export default defineConfig({
     logLevel: 'info',
     defaultSizes: 'parsed', // stat  // gzip
   },
-
+  inlineLimit: 10000,
   // 自定义修改webpack配置
   chainWebpack(memo, { env, webpack, createCSSRule }) {
   },
@@ -54,7 +56,7 @@ export default defineConfig({
   },
   // icon
   // favicon: '',
-  hash: false,
+  hash: true,
   /**
    * 会自动添加到网页html的顶部
    */
@@ -71,5 +73,12 @@ export default defineConfig({
    * https://umijs.org/zh-CN/config#theme
    * 配置主题，实际上是配 less 变量。
    */
-  theme,
-});
+  theme: theme
+}
+
+if(OPEN_THEME_BUILD) {
+  config.plugins = [...config.plugins, 'umi-plugin-antd-theme']
+  delete config.theme
+}
+
+export default defineConfig(config);

config/routes/index.ts

@@ -15,14 +15,14 @@ const memberCenterRoute = {
   path: '/memberCenter',
   component: '@/layouts/BasicLayout',
   routes: [
-    // {
-    //   path: '/memberCenter',
-    //   redirect: '/memberCenter/home'
-    // },
-    // {
-    //   path: '/memberCenter/shopAbility',
-    //   redirect: '/memberCenter/shopAbility/infoManage'
-    // },
+    {
+      path: '/memberCenter',
+      redirect: '/memberCenter/home'
+    },
+    {
+      path: '/memberCenter/shopAbility',
+      redirect: '/memberCenter/shopAbility/infoManage'
+    },
     {
       // 首页
       path: `/memberCenter/home`,

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"
+      }
+    }
+  ],
+  "min": true,
+  "isModule": false,
+  "ignoreAntd": false,
+  "ignoreProLayout": false,
+  "cache": true
+}
\ No newline at end of file

src/global/styles/global.less

 /********************************** 布局 ******************************************/
 @import './mixins/layout.less';
+@import './index.less';
+@import '../../theme/style/colors.less';
 
 @makeCenters : text,
 block,
@@ -45,7 +47,7 @@ h6 {
 // 公共的title伪类竖线
 .commonPanelTitle {
   padding-left: 8px;
-  position    : relative;
+  position: relative;
 
   &::before {
     content         : "";
@@ -57,8 +59,8 @@ h6 {
     width           : 2px;
     height          : .85333rem;
     background-color: @primary-color;
-    box-shadow      : 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
-    border-radius   : 1px;
+    box-shadow: 0 0.14933rem 0.256rem 0 rgba(97, 144, 232, .2);
+    border-radius: 1px;
   }
 }
 
@@ -82,11 +84,11 @@ h6 {
 
 // 公共状态 圆点
 .commonStatus {
-  display       : inline-block;
-  width         : 8px;
-  height        : 8px;
-  margin-right  : 6px;
-  border-radius : 50%;
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 6px;
+  border-radius: 50%;
   vertical-align: middle;
 }
 
@@ -115,7 +117,6 @@ h6 {
   background-color: @status-nopass; // 审核不通过
 }
 
-
 .mb-30 {
   margin-bottom: 30px;
 }

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/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>
@@ -46,28 +46,7 @@ const OuterSider: React.FC<OuterSiderProps> = (props) => {
             </li>
           ))
         }
-
       </ul>
-      {/* <Menu mode="inline" defaultSelectedKeys={['1']}>
-        <Menu.Item key="1">
-          通用
-        </Menu.Item>
-        <Menu.Item key="2">
-          渠道
-        </Menu.Item>
-        <Menu.Item key="3">
-          采购
-        </Menu.Item>
-        <Menu.Item key="4">
-          供应
-        </Menu.Item>
-        <Menu.Item key="5">
-          加工
-        </Menu.Item>
-        <Menu.Item key="6">
-          物流
-        </Menu.Item>
-      </Menu> */}
     </Sider>
   </>
 }

src/layouts/styles/MenuSlider.less

@@ -25,7 +25,7 @@
 }
 
 .wrapperSilder {
-  background-color: #38414A;
+  background-color: #38414A!important;
 
   .menuBox {
     padding: 0;

src/pages/member/memberLevel/index.less

@@ -60,28 +60,28 @@
 .levelIcon1 {
   width          : 100%;
   height         : 20px;
-  background     : url("../../../assets/imgs/vip1@2x.png") no-repeat center;
+  background     : url("/static/imgs/vip1@2x.png") no-repeat center;
   background-size: 24px 20px;
 }
 
 .levelIcon2 {
   width          : 100%;
   height         : 20px;
-  background     : url("../../../assets/imgs/vip2@2x.png") no-repeat center;
+  background     : url("/static/imgs/vip2@2x.png") no-repeat center;
   background-size: 24px 20px;
 }
 
 .levelIcon3 {
   width          : 100%;
   height         : 20px;
-  background     : url("../../../assets/imgs/vip3@2x.png") no-repeat center;
+  background     : url("/static/imgs/vip3@2x.png") no-repeat center;
   background-size: 24px 20px;
 }
 
 .levelIcon4 {
   width          : 100%;
   height         : 20px;
-  background     : url("../../../assets/imgs/vip4@2x.png") no-repeat center;
+  background     : url("/static/imgs/vip4@2x.png") no-repeat center;
   background-size: 24px 20px;
 }
 

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 Theme</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);
 
   }, [])